0

I use chartjs for the charts and chartjs-plugin-databels for the data labels within each bar.

I need make value of line bold and leave the first part unchanged.

I try find solution in documentaion:

https://chartjs-plugin-datalabels.netlify.app/guide/labels.html#multiple-labels and https://www.chartjs.org/docs/latest/charts/bar.html, but there is not result.

Pictures: It must look. vs It looks.

My code

import _ from "lodash";
import { Bar } from "react-chartjs-2";
import ChartDataLabels from "chartjs-plugin-datalabels";

const options = {
  indexAxis: "y" as const,
  responsive: true,
  elements: {
    bar: {
      borderWidth: 1,
    },
  },
  scales: {
    y: {
      ticks: {
        display: false,
      },
      grid: {
        display: false,
      },
    },
    x: {
      grid: {
        borderDash: [10, 10],
      },
    },
  },
  plugins: {
    datalabels: {
      anchor: `start` as "start", import _ from "lodash";
      align: `end` as "end", import _ from "lodash";

      formatter: function (value: any, context: any) {
        return (
          context.chart.data.labels[context.dataIndex] +
          ": " +
          context.dataset.data[context.dataIndex]
        );
      },
    },
    legend: {
      display: false,
    },
    title: {
      display: false,
    },
  },
};

const labels = [
  "Some label 1",
  "Some label 1",
  "Some label 1",
  "Some label 1",
  "Some label 1",
  "Other",
];

const data = {
  labels,
  datasets: [
    {
      data: labels.map(() => Math.floor(Math.random() * 10000)), // random values
      maxBarThickness: 28,
      inflateAmount: 3,
    },
  ],
};

const HorizontalBarChart = () => {
  return (
    <Bar options={options} data={data} plugins={[ChartDataLabels]} />
  );
};

What information to add to make the question clearer?

OneIvan
  • 11
  • 2
  • Afaik the plugin does not support this so if you want this behaviour you will need to write your own custom plugin – LeeLenalee Aug 17 '22 at 09:47
  • Can you tell me how to do this, please? – OneIvan Aug 17 '22 at 09:52
  • A lot of different kind of examples are in this SO issue, but you will need to adjust them since you want part of the text to be bold: https://stackoverflow.com/questions/42556835/show-values-on-top-of-bars-in-chart-js – LeeLenalee Aug 17 '22 at 10:05

0 Answers0