0

I am Using Charts.js Library for Displaying DoNutChart Chart. Issue i am Facing is when i hover over the DoNutChart the label name is truncating not getting the complete width of the Labels

Js

import React from 'react';
import { Doughnut } from 'react-chartjs-2';
import { withStyles } from '@material-ui/core/styles';

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const style = (theme) => ({
  donut: {
    backgroundColor: '',
    '& canvas': { zIndex: 999 }
  }
});

const DoNutChart = ({
  chartData = [],//Array of Objects is received here from Parent Component
  keyValue,//gets the key name which need to be mapped from Parent Component
  styles = {},
  labels = [],//getting the array of label names from Parent Component
  classes
}) => {
  let data = {
    labels: [...labels],
    datasets: [
      {
        data: chartData.map((x) => x[keyValue]),
        backgroundColor: [
          '#008712',
          '#6C5AE0',
          '#6FB1F7',
          '#ED4E78',
          '#FFEE80'
        ],
        borderColor: ['#008712', '#6C5AE0', '#6FB1F7', '#ED4E78', '#FFEE80'],
        borderWidth: 1
      }
    ]
  };
  let options = {
    maintainAspectRatio: true,

    scales: {
      y: {
        beginAtZero: true,
        display: false
      }
    },
    plugins: {
      legend: {
        display: false
      }
    }
  };
  return (
    // <div style={{ ...(styles || {}) }}>
    <div className={classes.donut}>
      <Doughnut data={data} height={100} options={options} />
    </div>
  );
};

export default withStyles(style)(DoNutChart);

I have tried using this reference Changing the z index of tooltip in chartjs-2 by increasing the z-index still i am not getting the expected result

Attached image of truncated label Names need the full Label Names enter image description here

Sam Mukherjee
  • 13
  • 2
  • Maybe one of the answers to this question helps? https://stackoverflow.com/questions/44497200/chartjs-tooltip-is-cut-off-when-out-of-canvas – uminder Aug 18 '22 at 06:22
  • It just gives padding from the bottom no changes in the label width – Sam Mukherjee Aug 18 '22 at 06:46
  • The problem is that the tooltips are drawn directly on the `canvas`, If they don't fit inside, they're only partly visible. Either you need to enlarge the `canvas` or use external tooltips. – uminder Aug 18 '22 at 07:10
  • SInce your canvas is too small to render the on canvas tooltip you will need to use an external one: https://www.chartjs.org/docs/3.7.1/configuration/tooltip.html#external-custom-tooltips – LeeLenalee Aug 18 '22 at 07:48
  • I am still facing the same issue by adding external Tooltip if it can be done can u share me the working fiddle – Sam Mukherjee Aug 29 '22 at 11:49

0 Answers0