[Chartjs]-Chartjs v2.5 – only show min and max on scale, absolute positioning on scale

by

5👍

✅

I’ve broken this answer down into the steps needed to get your chart to look like the provided image:

1. Only show max and min labels

First, use JavaScript max() and min() methods to determine the highest and lowest values in the data array:

var min = Math.min(...data);
var max = Math.max(...data);

Then, add the following options to the yAxes ticks configuration section:

  • Set the max and min values to the data array max and min values.
  • Set stepSize to the difference between the max and min value. This will ensure that it only shows the highest and lowest numbers in the labels.

2. Move labels to inside the right side of the chart

This can be done in two steps:

  • Add position: "right" to move the align the scale yAxes to the right side of the chart.
  • Set mirror: true in the ticks configuration to flip the labels over the yAxes, to get them to show inside the chart.

3. Format number with dollar sign and 2 decimal places

To format the numbers with a dollar sign and two decimal places, add a callback function to the ticks options:

callback: function(value) {
    return '$' + value.toFixed(2);
}

See How To Format Scale Numbers in Chart.js v2 and Formatting a number with exactly two decimals in JavaScript for more information.

4. Change color or hide the yAxes grid line

Although your question is about changing the color of the grid line, based on the provided image, I am assuming you want to remove the yAxes line. To remove the grid line, set drawBorder to false in the grid line configuration settings.

If you do want to change the grid line color to white, color: "#fff" will work, you just need to make sure that you put that line in the gridLines config section like:

gridLines: {
    color: "#fff"
}

5. Change label font formatting

This wasn’t in your questions, but if you want to change to label font color and sizing, simply use the fontColor and fontSize tick config options.

Final yAxes code:

yAxes: [{
    id: 'share_price',
    type: 'linear',
    position: "right",
    gridLines: {
        display: false,
        drawBorder: false,
        //color: "#fff"
    },
    ticks: {
        stepSize: max - min,
        min: min,
        max: max,
        mirror: true,
        fontColor: "#fff",
        fontSize: 18,
        callback: function(value) {
            return '$' + value.toFixed(2);
        }
    }
}]

JSFiddle Demo: https://jsfiddle.net/ujsg9w8r/5/

Leave a comment