[Chartjs]-Get my second y-axis in charts.js to always display the 100% tick

by

0👍

✅

I was able to solve it by adjusting the options and scales like this:

Dataset:

datasets: [
  {
    label,
    data: data
      ? Array.from({ length: data.x.values.length || 0 }, (_, i) => ({
          x: data.x.values[i],
          y: data.y.values[i],
        }))
      : [],
    backgroundColor: color,
    borderColor: color,
    pointRadius: 1.2,
    fill: false,
  },
  {
    data: data
      ? Array.from({ length: 7 }, (_, i) => ({
          x:
            i === 0
              ? 0
              : data?.x.values[i * 20 - 1] ||
                data?.x.values[(data?.x.values.length || 0) - 1],
          y: i === 6 ? Kpercent : i * 20,
        }))
      : [],
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    pointRadius: 1.2,
    fill: false,
    yAxisID: 'y1',
  },
],

Options:

scales: {
  x: {
    title: {
      display: true,
      text: data?.x.title || '',
    },
    ticks: {
      callback: formatPlotTicks,
    },
  },
  y: {
    title: {
      display: true,
      text: data?.y.title || '',
    },
    type: 'linear',
    display: true,
    position: 'left',
    ticks: {
      callback: formatPlotTicks,
    },
  },
  y1: {
    type: 'linear',
    display: true,
    position: 'right',
    min: 0,
    max: Kpercent,
    afterBuildTicks: (scaleInstance) => {
      scaleInstance.ticks.pop();
      scaleInstance.ticks.push({ value: 100 });
    },
    ticks: {
      stepSize: 20,
      callback: (value) => `${value}%`,
    },
    grid: {
      drawOnChartArea: false,
    },
  },
},

Leave a comment