Chart.js ticks 특정값(specific value)로 지정하기

✔️ 필요성

Chart.js로 차트를 그릴 때 축의 tick 값을 임의의 정해진 값으로 지정하고 싶을 때가 있다. 옵션에서 stepSize를 사용할 수도 있지만 linear하지 않은 축 value를 가지고 싶을 때는 어떻게 해야할까

scales: {
  y: {
    suggestedMin: 0,
    suggestedMax: 200,
    ticks: {
      stepSize: 50,
    }
  }
}

 

 

 

✔️ 문제 확인

tick과 관련된 여러가지 callback이 있는데 그 중에서 afterTickToLabelConversation을 사용할 수 있다

 

https://www.chartjs.org/docs/latest/axes/#tick-configuration

Axes | Chart.js

 

 

✔️ 문제 해결

아래와같이 autoSkip을 false로 전환하고 특정 값에 tick을 지정해주면 된다!

scales: {
  y: {
    suggestedMin: 0,
    suggestedMax: 200,
    ticks: {
    	autoSkip: false,
    }
    afterTickToLabelConversion: function (chart: any) {
        chart.ticks = []
        chart.ticks.push({ value: 0, label: 'Level1' })
        chart.ticks.push({ value: 21, label: 'Level2' })
        chart.ticks.push({ value: 42, label: 'Level3' })
        chart.ticks.push({ value: 66, label: 'Level4' })
        chart.ticks.push({ value: 88, label: 'Level5' })
        chart.ticks.push({ value: 110, label: 'Level6' })
        chart.ticks.push({ value: 120, label: 'Level7' })
        chart.ticks.push({ value: 130, label: 'Level8' })
        chart.ticks.push({ value: 150, label: 'Level9' })
        chart.ticks.push({ value: 190, label: 'Level10' })
    },
  }
}