Search code examples
chart.jschartjs-2.6.0vue-chartjs

How can I highlight/format a specific date label (e.g. today) on a time axis using chart.js?


I have a chart with the x-axis being a time line. The following is the relevant extract from the ChartOptions:

scales:
      {
        xAxes:
          [
            {
              display: true,
              type: 'time',
              time: {
                unit: this.shortPeriod ? 'day' : 'week',
                displayFormats: {
                  day: 'ddd',
                  week: '[W] W'
                },
                isoWeekday: true,
                display: false,
                tooltipFormat: 'dddd DD. MMM'
              }
            }
          ]
       }

Example of a week:

enter image description here

Now I would love to adjust/format a specific date label, like

  1. Replacing today's date with the label "Today"
  2. Increase the font weight to bold

Any idea how I could achieve that?


Solution

  • You can apply any custom formatting you want to return the text "Today": https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

    In 3.0 (currently in alpha), you can use scriptable tick options to make a single tick of your choosing bold:

    fontStyle: function(context) {
            return context.index === 0 ? 'bold' : undefined;
    },
    

    https://www.chartjs.org/docs/next/axes/styling.html#tick-configuration