Chart js: wrap legend label

Question

chart js how can I wrap legend labels text if there is more content?

code sandbox: legend maxline

chart.js: 3.6.0

react-chartjs-2: 4.3.1

thanks for ans but this option is not available in the chart version `3.6.0`. — Kanti vekariya, Aug 01 '22 at 08:15

score 2 · Answer 1 · answered Aug 01 '22 at 12:19

There is only one possible solution specifically for chartjs as chartjs does not support what you are asking.

you should extract label from data object like this

const limit = 10;
const suffix = "..";
const labels = [
  "Redssssssssssssssssssssssssssssssssssss",
  "Blue",
  "Yellow",
  "Green",
  "Purple",
  "Orange"
];

data.labels = labels.map((text) =>
  text.length < limit ? text : text.substring(0, limit) + suffix
);

It is not ideal. but this small hack can small your problem. the problem is that tooltip will also get truncated which ideally is not a good idea.

Thanks! @Robokishan for your valuable Answer. – Kanti vekariya Aug 02 '22 at 07:13 — Kanti vekariya, Aug 02 '22 at 07:13

score 0 · Answer 2 · answered Aug 01 '22 at 08:03

0

You can set overall width. For example:

<Doughnut
  options={{
    responsive: true,
    plugins: {
      legend: {
        position: "right",
        maxWidth: 120, //add this line to limit width
        labels: {
          boxWidth: 20
        }
      },
      title: {
        display: true,
        text: "Chart.js Doughnut Chart"
      }
    }
  }}
  data={data}
/>

answered Aug 01 '22 at 08:03

Yekmaz

1
1

it's legend `width` what if i display legend in two `columns`. – Kanti vekariya Aug 01 '22 at 08:19

Chart js: wrap legend label

2 Answers2