CODEWITHSUNDEEP
colorslabelchart.js
Balaji V
Balaji V

Reputation: 109

Chart.js Change color of the values *inside* the bars of a Bar chart

So what Im trying to do is to change the color of the values inside the bars of a Bar chart. I have tried all options and also have a pen where it doesnt seem to work: https://codepen.io/vbbalaji/pen/oNbwbpm

[![Bar Chart][1]][1]

[1]: https://i.sstatic.net/a8lE7.png ]

Upvotes: 0

Views: 810

Answers (1)

ty.
ty.

Reputation: 11132

There are two problems here:

  1. You need to include the chartjs datalabels script in order to use it. Make sure you include this script after the main Chart.js library: https://cdn.jsdelivr.net/npm/[email protected].

  2. Your datalabels options should be nested within the key plugins.

Here's the corrected config:

{
  type: "horizontalBar",
  data: {
    labels: ["Red", "Amber", "Green"],
    datasets: [
      {
        backgroundColor: ["#db5935", "#f0ae43", "#3cba9f"],
        data: [2, -4, 6]
      }
    ]
  },
  options: {
    legend: { display: false },
    title: { display: true, text: "Health Variance" },
    plugins: {
      datalabels: {
        color: "blue",
        labels: {
          title: { color: "blue", font: { weight: "bold" } },
          value: { color: "green" }
        }
      }
    }
  }
}

It looks like this:

Chart.js datalabels

Here's your updated codepen: https://codepen.io/typpo/pen/oNbwxvK

Upvotes: 1

Related Questions