Getting Started With Chart.js: Axes and Scales

In the first four tutorials, you have learned a lot about Chart.js. After reading the first four tutorials, you should be able to customize tooltips and tags, change fonts, and create different types of charts. This series of tutorials has not yet introduced an aspect of Chart.js: axis and scale.

The scale has changed a lot since the v1.0 version of the library and is now more powerful. In this tutorial, you will learn how to manipulate the scale and use the different options provided by the library to control its appearance.

Change grid lines and axis labels

All configuration options for grid lines are nested under scale options for title and font keys.

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

 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 also a key called grid . When set to font key.

You can also set the minimum and maximum value of the tick using the unit set to the minimum and maximum value of minute . You can use displayFormats key to specify the format in which time is displayed in the scale.

You can also use the round key to round the time before plotting it onto the chart. Be careful when setting the value of round . Suppose you set its value to hour and you need to plot two times on the chart. If one time is 5:30 am and the other time is 5:50 am, they will all be drawn on the tick mark at 5:00 am. Setting its value to minute will draw them on the 5:30 and 5:50 markers, respectively.

You can use the following code to draw a line chart drawn at the beginning of the tutorial using the time scale.

 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
        }
      }
    }
  }
}; 

Summarize

This tutorial helps you understand the different types of ticks in Chart.js. You can now easily customize the scales in your chart by controlling the color, minimum and maximum values ​​of the scales, the number of scales, and other such factors.

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

If you are looking for other learning resources or resources to use at work, check out the resources we offer on the Envato market.

The above is the detailed content of Getting Started With Chart.js: Axes and Scales. For more information, please follow other related articles on the PHP Chinese website!