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
                );
              },
            },
          },
        }}
      />

score 4 · Answer 1 · answered Aug 20 '19 at 14:33

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 () { }
      }
    }

Denialos · Answer 2 · 2017-08-04T07:00:50.330

1

Apply a custom className or id for the component and simply set a higher z-index for your chart's canvas element.

Judging from the code, something like this should work:

<div id="my-doughnut-chart-1">
<Doughnut
 ...props
/>
</div>

CSS:

#my-doughnut-chart-1 canvas { z-index: 9999 // just an example z-index, change it according to your project }

edited Aug 04 '17 at 07:00

answered Aug 04 '17 at 06:44

Denialos

956
7
16

Updated my answer. Does it help? – Denialos Aug 04 '17 at 07:01
Not that much beacause i didnt know the exact property. I cant find the tooltip css – RamAlx Aug 04 '17 at 07:17
1

You don't need to find the tooltip's CSS. Did you implement my solution into your example? Can you post it here? – Denialos Aug 04 '17 at 07:29
This approach won't work for me, because I need to have a text in the middle of Doughnut chart, but also tooltip on top of that. – justdvl Jul 29 '22 at 16:33

score 0 · Answer 3 · answered Jul 30 '23 at 15:29

Sorry for messy code:

<div style={{ position: 'relative' }} className='drr'>
  <Doughnut data={data} options={options} />

  <div className='DoughnutTextCenter'>
    <div className='Metric'>24%</div>
    <div className='Caption'>Vehicles in Nrm</div>
  </div>
</div>

CSS for DoughnutTextCenter:

.DoughnutTextCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  z-index: -10;
}

Make sure that your TEXT center div is either Relative or Absolute position, then set Z-index of it to like -10 or -999, some high number.

Then ChartJS chart will be on TOP of your text, including tooltips.

Changing the z index of tooltip in chartjs-2

3 Answers3

Linked