Chartjs Customize Scale Numbers

Question

Is there any way in ChartJS to change the 0 (1st number on the Y axis Scale) into a dollar sign? -> $

I manage to customize it but I cant figure out how to change 1 number into a different symbol.

var options = {
  pointDotRadius : 6,
  pointDotStrokeWidth : 2,
  datasetStrokeWidth : 12,
  scaleOverride: true,
  scaleSteps: 2,
  scaleStepWidth: 500,
  scaleStartValue: 0
}

I ve read somewhere about scaleLabel. But I can't understand how it works or even if thats what I need. Or should I just write scaleStartValue: null and just add it with html and css? (I mean thats the solution if ChartJS doesnt have such feature)

Could someone help me out? In case the scaleLabel is to be used, please do not just write the answer but I will need an explanation for how to use it. It will be needed for my future projects.

Thank you in advance.

Answer 1

You can keep track of the minimum value and set the label to $ if the value passed into the scaleLabel function is the minimum value.

Your code should look something like this :

var min = Infinity;
var myBarChart = new Chart(ctx).Bar(data, {
    scaleLabel: function(e) {
        if (Number(e.value) < min)
            min = Number(e.value);
        return (Number(e.value) === min) ? '$' : e.value;
    },
});

If you actually know your minimum value, you could just check for that instead.

---

See also this Fiddle !