quickchart icon indicating copy to clipboard operation
quickchart copied to clipboard

Ticks callback missing scope

Open sspread opened this issue 3 years ago • 4 comments

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.

sspread avatar Jul 08 '22 20:07 sspread

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 avatar Jul 10 '22 16:07 typpo

@typpo I see, thanks for explaining the limitations. I don't believe val is equivalent though for categories - it gives index instead.

sspread avatar Jul 11 '22 03:07 sspread

Can you show me an example? I can suggest an alternative.

typpo avatar Jul 11 '22 04:07 typpo

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

sspread avatar Jul 11 '22 05:07 sspread