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

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/chartjs-plugin-datalabels@0.7.0.

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:

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