Getting Started With Chart.js: Axes and 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 axes and 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 and Axis Labels

All the configuration options for grid lines are nested under the scale option in the grid 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 at the border of the axis using the borderWidth and borderColor keys respectively.

In all the charts up to this point, the scales did not have any descriptive text to let 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 and its color can be specified using the title and color key. You can also control the font family, size, and style using the family, style, and size keys respectively with the main font key.

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

var chartOptions = {
  plugins: {
    legend: {
      display: true,
      position: 'top',
      labels: {
        boxWidth: 50,
        usePointStyle: true,
        pointStyle: "line"
      }
    }
  },
  scales: {
    x: {
      grid: {
        display: false
      },
      title: {
        display: true,
        text: "Time in Seconds",
        color: "red",
        font: {
          size: 24,
          weight: "bold"
        }
      }
    },
    y: {
      grid: {
        color: "#ccc",
        borderDash: [20, 4],
        borderColor: "black",
        tickColor: "black"
      },
      title: {
        display: true,
        text: "Speed in Miles per Hour",
        color: "green",
        font: {
          size: 18,
          weight: "bold"
        }
      }
    }
  }
};

There is one more key called offset within grid. 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 in this series.

var chartOptions = {
  indexAxis: 'y',
  scales: {
    x: {
      grid: {
        color: "#ccc",
        borderColor: "black",
      },
      ticks: {
        min: 0,
        max: 6500,
        stepSize: 1300
      },
      title: {
        display: true,
        text: "Density in kg/m3",
        color: "green",
        font: {
          weight: "bold",
          size: 22,
          lineHeight: 2
        }
      }
    },
    y: {
      grid: {
        display: false
      }
    }
  }
};

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 Axis

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 the radial axis. You can control the appearance of the 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 the display key to false. The color and width of the angle lines can be controlled using the color and lineWidth keys.

The appearance of the point labels can be controlled using the pointLabels key. Just like angle lines, this key also accepts an object as its value. The font family, size, and style can be specified using the family, size, and style keys inside the font key.

You can also set a minimum and maximum value for the scale using the min and max keys. The step size and the 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, and backDropPadding. You can use them to show or hide the background behind the tick labels and control its width, height, and color.

var chartOptions = {
  plugins: {
    legend: {
      position: "top",
      align: "start",
      labels: {
        boxWidth: 50,
        usePointStyle: true,
        pointStyle: "line"
      }
    }
  },
  scales: {
    r: {
      min: 30,
      max: 100,
      grid: {
        color: "gray",
        lineWidth: 1,
        borderDash: [2, 2]
      },
      angleLines: {
        color: "green",
        lineWidth: 3
      },
      ticks: {
        stepSize: 20,
        color: "white",
        backdropColor: "green",
      },
      pointLabels: {
        backdropColor: "black",
        backdropPadding: 5,
        color: "white",
        font: {
          size: 18
        }
      }
    }
  }
};

Configuring Time Scales

You can use a time scale to display times and dates on a chart. 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 key.

To create a time scale, you have to set the value of the type key to time under the x key. 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 stepSize key. The format in which the tooltips for the plotted data should be displayed is specified using the tooltipFormat key. In this case, we are just displaying the hours and minutes because our time unit is set to minute. The format in which the time is displayed in the ticks can be specified using the displayFormats 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 at the beginning of the tutorial could be plotted using a time scale with the help of the following code.

var chartOptions = {
  plugins: {
    legend: {
      position: "top",
      labels: {
        boxWidth: 50,
        usePointStyle: true,
        pointStyle: "line",
      }
    }
  },
  scales: {
    x: {
      type: "time",
      grid: {
        tickColor: "green",
        borderDash: [5, 2],
        tickWidth: 2,
        color: "black",
        borderColor: "black",
      },
      time: {
        unit: "minute",
        stepSize: 30,
        tooltipFormat: "hh:mm a",
        displayFormats: {
          "minute": "hh:mm a"
        }
      },
      ticks: {
        color: "green",
        font: {
          weight: "bold"
        }
      },
      title: {
        display: true,
        text: "Time",
        font: {
          weight: "bold",
          size: 22
        }
      }
    },
    y: {
      grid: {
        color: "black",
        borderDash: [5, 2,],
        borderColor: "black",
        tickColor: "red",
        tickWidth: 2,
      },
      ticks: {
        color: "red",
        font: {
          weight: "bold"
        }
      },
      title: {
        display: true,
        text: "Speed (in mph)",
        font: {
          weight: "bold",
          size: 22
        }
      }
    }
  }
};

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.