Changing the z index of tooltip in chartjs-2

Question

i'm running through an issue with react-chartjs2. I want somehow to change the z-index of the tooltip. I can't find a property from the documentation so i was wondering if you know a proper solution. Here is a screenshot of my doughnut chart

You can see the issue i mentiom. Half of the tooltip is now shown. I really appreciate your help

Here is my code:

<Doughnut
        data={sectorsData}
        width={250}
        height={250}
        redraw
        options={{
          legend: {
            display: false
          },
          maintainAspectRatio: true,
          responsive: true,
          cutoutPercentage: 80,
          animation: {
            animateRotate: false,
            animateScale: false
          },
          elements: {
            center: {
              textNumber: `${sectorsCounter}`,
              text: intl.formatMessage({ id: 'pie.sectors' }),
              fontColor: '#656566',
              fontFamily: 'EurobankSans',
              fontStyle: 'normal',
              minFontSize: 25,
              maxFontSize: 25,
            }
          },
          /*eslint-disable */
          tooltips: {
            custom: (tooltip) => {
              tooltip.titleFontColor = '#656566';
              tooltip.titleFontFamily = 'EurobankSans';
              tooltip.bodyFontColor = '#656566';
              tooltip.bodyFontFamily = 'EurobankSans';
              tooltip.backgroundColor = '#eaeeef';
            },
            /* eslint-enable */
            callbacks: {
              title: (tooltipItem, data) => {
                const titles = data.datasets[tooltipItem[0]
                  .datasetIndex].titles[tooltipItem[0].index];
                return (
                  titles
                );
              },
              label: (tooltipItem, data) => {
                const labels =
                  NumberFormatter(data.datasets[tooltipItem.datasetIndex]
                  .labels[tooltipItem.index],
                  2,
                  decimalSep,
                  thousandSep
                  );
                return (
                  labels
                );
              },
              afterLabel: (tooltipItem, data) => {
                const afterLabels = data.datasets[tooltipItem.datasetIndex]
                  .afterLabels[tooltipItem.index];
                return (
                  afterLabels
                );
              },
            },
          },
        }}
      />

Answer 1

If you don't want to make custom Tooltip, then you can try with tooltip settings to make it shorter/smaller:

You can remove extra/unwanted elements from the tooltip. And also can remove extra spacing.

 tooltips: {
      "enabled": true,
      displayColors: false,
      caretSize: 0,
      titleFontSize: 9,
      bodyFontSize: 9,
      bodySpacing: 0,
      titleSpacing: 0,
      xPadding: 2,
      yPadding: 2,
      cornerRadius: 2,
      titleMarginBottom: 2,
      callbacks: {
        title: function () { }
      }
    }