Getting Started With Chart.js: Line and Bar Charts

This tutorial builds upon the previous Chart.js introduction, demonstrating line and bar chart creation. We'll explore customization options to enhance chart appearance and data representation.

Line Charts: Visualizing Change Over Time

Line charts effectively illustrate how a variable changes in relation to another, often time. For instance, they're ideal for displaying a vehicle's speed over time.

Chart.js simplifies line chart creation. By default, charts are filled with rgba(0, 0, 0, 0.1). To make the background color visible, ensure the backgroundColor property is set and the fill property is true. The tension key allows for custom cubic interpolation, influencing the line's curve between data points. Setting stepped to "middle" creates a step-like effect.

Individual segments between data points can be styled uniquely. This example shows the speed of two cars:

const checkSpeed = (ctx, color_a, color_b) => ctx.p0.parsed.y > ctx.p1.parsed.y ? color_a : color_b;

let dataFirst = {
  label: "Car A - Speed (mph)",
  data: [0, 59, 75, 20, 20, 55, 40],
  borderColor: "black",
  backgroundColor: "transparent",
  borderDash: [3, 3],
  stepped: "middle"
};

let dataSecond = {
  label: "Car B - Speed (mph)",
  data: [20, 15, 60, 60, 65, 30, 70],
  borderColor: "blue",
  backgroundColor: "transparent",
  segment: {
        borderColor: ctx => checkSpeed(ctx, 'orangered', 'yellowgreen'),
  },
};

let speedData = {
  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  datasets: [dataFirst, dataSecond]
};

let lineChart = new Chart(speedCanvas, {
  type: "line",
  data: speedData
});

This code compares consecutive data points. If the speed decreases, orangered is used; otherwise, yellowgreen.

Bar Charts: Multiple Y-Axes for Clarity

For multiple datasets with different scales, using multiple y-axes enhances readability. Each dataset can be assigned to a specific y-axis using the yAxisID key.

let gravityBars = '#F06292';
let densityBars = '#4DB6AC';

let densityData = {
  label: "Density of Planet (kg/m3)",
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  backgroundColor: densityBars,
  yAxisID: "y-axis-density"
};

let gravityData = {
  label: "Gravity of Planet (m/s2)",
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: gravityBars,
  yAxisID: "y-axis-gravity"
};

let planetData = {
  labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  datasets: [densityData, gravityData]
};

let chartOptions = {
  barPercentage: 1,
  categoryPercentage: 0.8,
  scales: {
    "y-axis-density": {
      grid: {
        color: densityBars,
        tickColor: densityBars,
        borderColor: densityBars
      },
      ticks: {
        color: densityBars
      },
      position: "left"
    },
    "y-axis-gravity": {
      grid: {
        color: gravityBars,
        tickColor: gravityBars,
        borderColor: gravityBars
      },
      ticks: {
        color: gravityBars
      },
      position: "right"
    }
  }
};

let barChart = new Chart(densityCanvas, {
  type: "bar",
  data: planetData,
  options: chartOptions
});

This example uses unique yAxisID values and customizes grid, tick, and border colors for each axis in chartOptions. barPercentage and categoryPercentage control bar spacing.

Conclusion

This tutorial covers fundamental line and bar chart creation and customization in Chart.js, enabling you to create visually appealing and informative charts. The next tutorial will explore radar and polar area charts.

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