quickchart
quickchart copied to clipboard
Ticks callback missing scope
Expecting callback to contain scope of this as seen in this charts.js example: https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html
More info https://www.chartjs.org/docs/latest/axes/labelling.html
I.e. this.getLabelForValue should be available, but it is not.
Hi @sspread, access to the chart context is limited in the Community version of QuickChart due to more CPU-intensive sandboxing requirements. You can access the chart context by using the self-hosted version (which is not fully sandboxed) or the paid version of QuickChart.
A quick workaround would be to just use val instead of this.getLabelForValue(val).
@typpo I see, thanks for explaining the limitations. I don't believe val is equivalent though for categories - it gives index instead.
Can you show me an example? I can suggest an alternative.
I figure I can ultimately resort to formatting labels on my server before hitting quickchart, but here is a simple contrived example https://quickchart.io/sandbox/#%7B%22chart%22%3A%22%7B%5Cn%20%20%20%20%5C%22type%5C%22%3A%20%5C%22line%5C%22%2C%5Cn%20%20%20%20%5C%22data%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%5C%22datasets%5C%22%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22yAxisID%5C%22%3A%20%5C%22y%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22xAxisID%5C%22%3A%20%5C%22x%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22data%5C%22%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%2022%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%2017%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%2016%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%2018%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%2020%5Cn%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%5D%2C%5Cn%20%20%20%20%20%20%5C%22labels%5C%22%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%5C%220-3-88%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%221-2-22%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%220-0-34%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%220-5-43%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%5C%228-02-32%5C%22%5Cn%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20%5C%22options%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%5C%22scales%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%5C%22x%5C%22%3A%7B%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22ticks%5C%22%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20callback%3A%20function(val)%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Hide%20every%20label%20with%20leading%20zero%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20label%20%3D%20this.getLabelForValue(val)%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20label.startsWith('0')%20%3F%20''%20%3A%20label%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%22%2C%22width%22%3A800%2C%22height%22%3A300%2C%22version%22%3A%223%22%2C%22backgroundColor%22%3A%22%23fff%22%7D