Chartjs-ChartJs: Is there a way to control the font options per line for a multiline axis label

by

0👍

✅

You can use a plugin to redraw the ticks for you, might need some finetuning for your specific needs:

var options = {
  type: 'line',
  data: {
    labels: [
      ["Red", "subTitle"],
      ["Blue", "subTitle"],
      ["Yellow", "subTitle"],
      ["Green", "subTitle"],
      ["Purple", "subTitle"],
      ["Orange", "subTitle"]
    ],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'red',
      backgroundColor: 'red'
    }]
  },
  options: {
    plugins: {
      customTextColor: {
        color: 'blue',
        boxColor: 'white',
        fontStringSubTitle: 'italic 12px Comic Sans MS',
        fontStringMain: ''
      }
    }
  },
  plugins: [{
    id: 'customTextColor',
    afterDraw: (chart, args, opts) => {
      // Set all variables needed
      const {
        ctx,
        scales: {
          y,
          x
        }
      } = chart;
      const labelItems = x._labelItems;
      const {
        color,
        boxColor,
        fontStringMain,
        fontStringSubTitle
      } = opts;
      const defaultFontString = '12px "Helvetica Neue", Helvetica, Arial, sans-serif';

      for (let i = 0; i < labelItems.length; i++) {
        let labelItem = labelItems[i];

        if (!Array.isArray(labelItem.label)) {
          continue;
        }

        let metrics = ctx.measureText(labelItem.label);
        let labelWidth = metrics.width;
        let labelHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;

        //Draw box over old labels so they are inviseble
        ctx.save();
        ctx.fillStyle = boxColor || '#FFFFFF';
        ctx.fillRect((labelItem.translation[0] - labelWidth / 2), labelItem.translation[1], labelWidth, labelHeight * labelItem.label.length);
        ctx.restore();

        // Draw new text on canvas
        let offset = 0;
        labelItem.label.forEach(el => {
          let elTextMetrics = ctx.measureText(el);
          let elWidth = elTextMetrics.width;

          if (labelItem.label.indexOf(el) === 0) {
            ctx.font = fontStringMain || defaultFontString;
          } else {
            ctx.font = fontStringSubTitle || defaultFontString;
          }

          ctx.save();
          ctx.fillStyle = color || Chart.defaults.color
          ctx.fillText(el, (labelItem.translation[0] - elWidth / 2), labelItem.translation[1] + labelItem.textOffset + offset);
          ctx.restore();
          offset += elTextMetrics.fontBoundingBoxAscent + elTextMetrics.fontBoundingBoxDescent;
        });
      }

      // Draw white box over old label

    }
  }]
}

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>

Leave a comment