Home > Web Front-end > JS Tutorial > Getting Started With Chart.js: Axes and Scales

Getting Started With Chart.js: Axes and Scales

Christopher Nolan
Release: 2025-03-15 09:21:16
Original
117 people have browsed it

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"
        }
      }
    }
  }
}; 
Copy after login

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
        }
      }
    }
  }
}; 
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template