Question

165

ChartJS show value in legend (Chart.js V3.5)

rated 0 times [ 166] [ 1] / answers: 1 / hits: 6553 / 3 Years ago, wed, september 29, 2021, 12:00:00

I need the value of chart show after name of data for example ([colour of data] Car 50, [colour of data] Motorcycle 200). I've tried change the value of legend title but it doesn't work at all

Here is it my code:

var ctx = document.getElementById('top-five').getContext('2d');

var myChartpie = new Chart(ctx, {

  type: 'pie',

  data: {

    labels: {!! $top->pluck('name') !!},

    datasets: [{

      label: 'Statistics',

      data: {!! $top->pluck('m_count') !!},

      backgroundColor: {!! $top->pluck('colour') !!},

      borderColor: {!! $top->pluck('colour') !!},

    }]

  },

  options: {

    plugins: {

      legend: {

        display: true,

        title: {

          text: function(context) {//I've tried to override this but doesn't work

            var value = context.dataset.data[context.dataIndex];

            var label = context.label[context.dataIndex];

            return label + ' ' + value;

          },

        }

      },

    },

    responsive: true,

  }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aidan

Add To Favorites

Follow

Total Points: 72

Total Questions: 95

Total Answers: 121

Location: Uzbekistan

Member since Sat, Feb 27, 2021

3 Years ago

aidan questions

1 Solana - How to get the balance from my Phantom wallet?

Mon, Oct 11, 21, 00:00, 3 Years ago

1 Unable to access modal-dialogue in cypress

Sun, Sep 5, 21, 00:00, 3 Years ago

1 Include an external css file in vuejs

Thu, Jan 16, 20, 00:00, 4 Years ago

1 How to update the state immediately in React functional component?

Tue, Jan 7, 20, 00:00, 4 Years ago

1 what is the purpose of chrome-extension inject.js

Thu, Sep 19, 19, 00:00, 5 Years ago

View All

answered 3 Years ago reina · Accepted Answer

You can use a custom generateLabels function for this:

var options = {

  type: 'doughnut',

  data: {

    labels: [Red, Blue, Yellow, Green, Purple, Orange],

    datasets: [{

      label: '# of Votes',

      data: [12, 19, 3, 5, 2, 3],

      backgroundColor: [Red, Blue, Yellow, Green, Purple, Orange],

    }]

  },

  options: {

    plugins: {

      legend: {

        labels: {

          generateLabels: (chart) => {

            const datasets = chart.data.datasets;

            return datasets[0].data.map((data, i) => ({

              text: `${chart.data.labels[i]} ${data}`,

              fillStyle: datasets[0].backgroundColor[i],

              index: i

            }))

          }

        }

      }

    }

  }

}



var ctx = document.getElementById('chartJSContainer').getContext('2d');

new Chart(ctx, options);

<body>

  <canvas id=chartJSContainer width=600 height=400></canvas>

  <script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js></script>

</body>