Getting Started With Chart.js: Scales

In the last four tutorials, you have learned a great deal about Chart.js. After reading the first four tutorials, you should now be able to customize the tooltips and labels, change the fonts, and create different chart types. One aspect of Chart.js that has not been yet covered in this series is scales.

Scales have changed a lot since version v1.0 of the library and are now much more powerful. In this tutorial, you will learn how to manipulate scales and control their appearance using different options that the library provides.

Changing Grid Lines

All the configuration options for grid lines are nested under the scale option in the gridLines key. This key defines options to customize the grid lines that run perpendicular to the axes. Let's change the grid lines of the line chart that you created in the line and bar charts tutorial.

You can show or hide the grid lines of a chart by using the display key. Its initial value is true, so the grid lines are shown by default. The color of the grid lines can be specified by using the color key. If you want the grid lines to be composed of dashes instead of being solid lines, you can provide a value for the length and spacing of dashes as a value of the borderDash key. You can set the width and color of the lines for the first or zero index using the zeroLineWidth and zeroLineColor keys respectively.

In all the charts up to this point, the scales did not have any descriptive text to let the viewers know what a particular axis represented. This can make the charts less useful. For example, if you see a plot of car speed and can't figure out the unit in which the speed is plotted on the y-axis, the chart is pretty much useless.

You can show or hide the scale labels on a chart by using the display key. The scale labels are hidden by default. The text that should be shown on these scales can be specified using the labelString key. You can also control the font color, family, size, and style using the fontColor, fontFamily, fontSize, and fontStyle keys respectively.

Here is the same old car speed chart with a different set of chart options specified.

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: false,
        color: "black"
      },
      scaleLabel: {
        display: true,
        labelString: "Time in Seconds",
        fontColor: "red"
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

There is one more key called offsetGridLines. When set to true, it shifts the labels to the middle of the grid lines. This is generally useful when creating bar charts.

Configuring Linear Scales

Linear scales are used to chart numerical data. These scales can be created on either the x or y axis. In most cases, Chart.js automatically detects the minimum and maximum values for the scales. However, this can result in some confusion. 

Let's say you want to plot the marks of students in a class. If the maximum marks for the test were 200 but none of the students scored more than 180 marks, the scale will most probably max out at 180. In such cases, the readers will have no way of knowing if the maximum marks were 180 or 200.

Chart.js has multiple built-in options that let you control different keys for scales. You can specify the minimum and maximum value for scales using the min and max keys. The step size of the scales can be controlled using the stepSize property. This way, you can determine how many grid lines should be drawn on the chart. Another way to set a limit on the number of grid lines and ticks shown on a chart is to use the maxTicksLimit key.

Here is the code to specify the minimum and maximum scale values for the horizontal scale on the bar chart for a previous tutorial of this series.

var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5,
      gridLines: {
        display: false
      }
    }],
    xAxes: [{
      gridLines: {
        zeroLineColor: "black",
        zeroLineWidth: 2
      },
      ticks: {
        min: 0,
        max: 6500,
        stepSize: 1300
      },
      scaleLabel: {
        display: true,
        labelString: "Density in kg/m3"
      }
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};

Just like the linear scale, you can also create logarithmic scales to plot values on your chart. In this case, logarithmic interpolation is used to determine the position of a point on the axes. These scales can also be placed on both the x-axis and the y-axis.

Configuring Radial Linear Scales

This scale type is used for radar and polar area chart types. Unlike the regular linear scale, this one overlays the chart area instead of being positioned on the axis.

There are a lot of keys specifically targeted at radial scales. For example, you can use the lineArc key to specify if the grid lines should be circular or straight. The default value is false for radar charts and true for polar area charts.

You can control the appearance of lines that radiate from the center of the chart to its point labels using the angleLines key. It accepts an object as its value. The object can contain keys to control the color and width of angle lines. You can hide the angle lines by setting the value of display key to false. The color and width of angle lines can be controlled using the color and lineWidth keys.

The appearance of point labels can be controlled using the pointLabels key. Just like angle lines, this key also accepts an object as its value. Please note that these options only have an effect when the value of lineArc is set to false. The font color, family, size, and style can be specified using the fontColor, fontFamily, fontSize, and fontStyle keys.

You can also set a minimum and maximum value for the scale using the min and max keys. The step size and maximum number of ticks on the scale can be specified using the stepSize and maxTicksLimit keys. These options are available under the ticks key. Some other keys available inside ticks are showLabelBackdrop, backdropColor, backdropPaddingX, and backDropPaddingY. You can use them to show or hide the background behind the tick labels and control its width, height, and color.

You can also use the gridLines key that we used for the line chart to set a color and width for the grid lines in a radar chart. Here are some options to create a radar chart with customized scales.

var chartOptions = {
  scale: {
    gridLines: {
      color: "black",
      lineWidth: 3
    },
    angleLines: {
      display: false
    },
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18,
      fontColor: "green"
    }
  },
  legend: {
    position: 'left'
  }
};

Configuring Time Scales

You can use a time scale to display times and dates on a chart. As mentioned in the introductory Chart.js tutorial, you need to include Moment.js in your projects to display time. One restriction on using a time scale is that it can be displayed only on the x-axis. All the configuration options for the time scale are located under the time sub-option.

To create a time scale, you have to set the value of the type key to time under the xAxes sub-option. After that, you can set the value of different keys under time. The unit which should be used to draw the ticks is set using the unit key. 

The step of the unit can be specified using the unitStepSize key. The format in which the labels for the ticks should be displayed is specified using the displayFormats sub-option. You can read more about allowed string formats on the Moment.js website.

The format in which the time is displayed in the tooltips can be specified using the tooltipFormat key. 

You can also round the time before plotting it on the chart using the round key. Be careful when setting a value for round. Let's say you set its value to hour and there are two times that need to be plotted on the chart. If one time is 5:30 AM and another is 5:50 AM, they will both be plotted on the 5:00 AM tick mark. Setting its value to minute will plot them on the 5:30 and 5:50 marks respectively.

The line chart plotted in the beginning of the tutorial could be plotted using a time scale with the help of the following code.

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: 'hour',
        unitStepSize: 0.5,
        round: 'hour',
        tooltipFormat: "h:mm:ss a",
        displayFormats: {
          hour: 'MMM D, h:mm A'
        }
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

Final Thoughts

This tutorial helped you learn about different kinds of scales in Chart.js. You can now easily customize the scales in a chart by controlling their color, minimum and maximum value, number of ticks, and other such factors.

After reading all five tutorials in this series, you should now be able to create all kinds of charts available in Chart.js. I hope you liked the tutorial and the series. 

If you’re looking for additional resources to study or to use in your work, check out what we have available in the Envato marketplace. If you have any questions, please let me know in the comments. Have you ever used this library in your own projects? Please share some tips in the comments.