Changing Point Label Colors In Chart.JS

Question

I haven't posted a question in some time, so If I am not following a rule - bear with me please. Attached is my current code and a reference image to the chart. I am also VERY new to ChartJS.

This may be a bit strange, but the client has their own software rendering a chart and the original code is not accessible to me. So the way to solve this after hours of trying was to use globals.

Each point on the chart has a gray label showing the value. Currently each one has a value of 100%. I was wondering if there was a way to change the color of these data point labels? I have tried researching, but it seems like everyone creates an instance of their current chart, changes options/datasets, and then renders it again.

My question: Is there a Chart.defaults.global for changing data point labels?

Thanks in advance! Just sick of wasting time trying to figure this out. :(

Current Code:

Chart.defaults.global.defaultFontColor = "#fff";
Chart.defaults.global.defaultColor = "#fff";
Chart.defaults.scale.gridLines.color = "#fff";
Chart.defaults.scale.gridLines.zeroLineColor = "#fff";

Current Chart JS Chart Image

Btw - Re-rendering an instance of the chart doesn't seem to work, but maybe it does I just don't know what I'm doing. Here is the HTML code for the pre-rendered chart pulled from Chrome developer tools and beautified.

<canvas class="tsjschart chartjs-render-monitor" id="ChartKpiTrendLine" data-tschart="{
  " chartID ": "ChartKpiTrendLine ",
  "tooltipID ": "ChartKpiTrendLine_Tooltip ",
  "config ": {
    "pointLabelSize ": 12,
    "pointLabelColor ": "#606060 ",
    "hasPointTooltip ": true,
    "hasPointLabel ": true,
    "tsLimitPluginData ": null,
    "datasets ": [
      {
        "label ": "1 ",
        "fill ": false,
        "lineTension ": 0,
        "borderColor ": "#418CF0 ",
        "hoverBorderColor ": "#418CF0 ",
        "borderWidth ": 2,
        "borderDash ": [],
        "data ": [
          {
            "x ": "2022-06-20T11:00:00.000-05:00 ",
            "y ": 100.0
          },
          {
            "x ": "2022-06-20T12:00:00.000-05:00 ",
            "y ": 100.0
          },
          {
            "x ": "2022-06-20T13:00:00.000-05:00 ",
            "y ": 100.0
          },
          {
            "x ": "2022-06-20T14:00:00.000-05:00 ",
            "y ": 100.0
          },
          {
            "x ": "2022-06-20T15:00:00.000-05:00 ",
            "y ": 100.0
          }
        ],
        "pointStyle ": "circle ",
        "pointRadius ": [
          4,
          4,
          4,
          4,
          4
        ],
        "pointHoverRadius ": 6,
        "pointBorderWidth ": 0,
        "pointBackgroundColor ": [
          "#0F59BC ",
          "#0F59BC ",
          "#0F59BC ",
          "#0F59BC ",
          "#0F59BC "
        ],
        "pointBorderColor ": [
          "#0F59BC ",
          "#0F59BC ",
          "#0F59BC ",
          "#0F59BC ",
          "#0F59BC "
        ],
        "backgroundColor ": "#0F59BC ",
        "hoverBackgroundColor ": "#0F59BC "
      }
    ],
    "tsTooltipPluginData ": [
      [
        "<b>11:00 AM</b>
    <br/>100.0 %", "<b>12:00 PM</b>
    <br/>100.0 %", "<b>1:00 PM</b>
    <br/>100.0 %", "<b>2:00 PM</b>
    <br/>100.0 %", "<b>3:00 PM</b>
    <br/>100.0 %" ] ], "tsLabelPluginData": [ [ "100.0 %", "100.0 %", "100.0 %", "100.0 %", "100.0 %" ] ], "valueAxisEnabled": true, "valueAxisDecimalPlaces": 1, "valueAxisScaleLabelEnabled": false, "valueAxisScaleLabel": "", "valueAxisScaleLabelSize": 12, "valueAxisTickSize": 12, "valueAxisTickBeginAtZero": true, "valueAxisMin": 0.0, "valueAxisMax": 120.0, "valueAxisTickStepSize": 20.0, "valueAxisType": "linear", "groupAxisEnabled": true, "groupAxisScaleLabelEnabled": false, "groupAxisScaleLabel": "", "groupAxisScaleLabelSize": 12, "groupAxisTickSize": 12, "groupAxisTimeFormat": "LT", "groupAxisTickMinRot": 0, "groupAxisTickMaxRot": 90, "groupAxisTickMaxCharacters": 0, "groupAxisIsTime": true, "groupAxisTimeIsUtc": false, "groupLabelIsDt": true, "groupLabelIsUtc": false, "groupAxisTimeUnit": "hour", "groupAxisTickStepSize": 1.0, "groupAxisAutoSkip": false, "groupAxisLabelDict": { "1655740800000": "2022-06-20T11:00:00-05:00", "1655744400000": "2022-06-20T12:00:00-05:00", "1655748000000": "2022-06-20T13:00:00-05:00", "1655751600000": "2022-06-20T14:00:00-05:00", "1655755200000": "2022-06-20T15:00:00-05:00" }, "labels": [ "2022-06-20T11:00:00-05:00", "2022-06-20T12:00:00-05:00", "2022-06-20T13:00:00-05:00", "2022-06-20T14:00:00-05:00", "2022-06-20T15:00:00-05:00" ], "legendEnabled": false, "groupAxisType": "time" }, "hasClickEvent": true, "maintainAspectRatio": false, "animationIsEnabled": true }" width="803" height="562" style="display: block; height: 450px; width: 643px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default;"> </canvas>
</div>
<div class="tsjschart-tooltip" id="ChartKpiTrendLine_Tooltip" style="left: 857.663px; top: 529.113px; padding: 6px; display: none;"></div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Chart.js does not draw any data labels itself by default. You most probably have activated (imported) a plugin such as chartjs-plugin-datalabels that draws these labels (see also this answer).

In case of chartjs-plugin-datalabels, individually colored data labels can be obtained through the scriptable option datalabels.color.

options: {
    plugins: {
      datalabels: {
        ...
        color: ctx => ['red', 'blue', 'green', ...]
        ...

Please take a look at the Custom Labels sample page and see how it works.