Skip to main content

Line Chart

Line charts are essential tools for visualizing data trends over time or continuous data points. Using the react-google-charts library, you can easily integrate interactive line charts into your React applications, leveraging the powerful features of Google Charts.

Each example below is interactive, rendered directly in your browser using SVG, and offers tooltips for detailed views when hovered. Dive into each example to understand how line charts can be customized and utilized to represent your data effectively.

High-Level Overview​

To render a Line Chart, you need to provide the following props to the Chart component:

  • chartType: Set this to "LineChart" for classic line charts or "Line" for Material Design line charts.
  • data: Provide the chart data in a tabular format.
  • options: (Optional) Customize the chart with various options like title, colors, and display settings.
  • width and height: (Optional) Define the size of the chart.

Basic Usage​

Classic Line Chart​

import React from "react";
import { Chart } from "react-google-charts";

const data = [
  ["x", "dogs"],
  [0, 0],
  [1, 10],
  [2, 23],
  [3, 17],
  [4, 18],
  [5, 9],
  [6, 11],
  [7, 27],
  [8, 33],
  [9, 40],
  [10, 32],
  [11, 35],
];

const options = {
  title: "Line Chart Example",
  hAxis: { title: "Time" },
  vAxis: { title: "Popularity" },
  legend: "none",
};

function App() {
  return (
    <Chart
      chartType="LineChart"
      width="100%"
      height="400px"
      data={data}
      options={options}
    />
  );
}

export default App;

Material Design Line Chart​

import React from "react";
import { Chart } from "react-google-charts";

const data = [
  ["Year", "Sales", "Expenses"],
  ["2013", 1000, 400],
  ["2014", 1170, 460],
  ["2015", 660, 1120],
  ["2016", 1030, 540],
];

const options = {
  chart: {
    title: "Company Performance",
    subtitle: "Sales and Expenses over the Years",
  },
};

function App() {
  return (
    <Chart
      chartType="Line"
      width="100%"
      height="400px"
      data={data}
      options={options}
    />
  );
}

export default App;

Examples​

Below are interactive examples of Line Charts rendered using react-google-charts. Each example demonstrates different features and customization options. You can interact with the charts directly in your browser.

Basic Line Chart with Default Styling​

This example shows a basic line chart with default settings.

Material Design Line Chart​

This example demonstrates a Material Design Line Chart with default settings.

Dates in x axis with custom formatting​

Material Design Dual Y-Axis Chart​

This example shows how to create a Material Design Line Chart with dual Y-axes.

Multiple Series Line Chart​

This example demonstrates how to plot multiple data series in a single line chart.

Intervals and Error Bars​

Google Charts allows you to add intervals or error bars to your line charts to represent data variability or uncertainty. Below are examples of different interval styles.

Area Intervals​

Bar Intervals​

Box Intervals​

Line Intervals​

Combining Interval Styles​

Customizing the Line Chart​

You can customize various aspects of the Line Chart using the options prop.

Styling Options​

Customize the chart's appearance:

const options = {
  title: "Company Performance",
  curveType: "function", // Smooths the lines
  legend: { position: "bottom" },
  hAxis: {
    title: "Year",
    gridlines: { count: 15 },
  },
  vAxis: {
    title: "Sales",
    gridlines: { color: "none" },
  },
  colors: ["#a52714", "#097138"],
  lineWidth: 4,
  intervals: { style: "area" }, // Adds area intervals
};

Dual Y-Axis​

To create a chart with dual Y-axes, you can specify multiple axes in the series option:

const options = {
  chart: {
    title: "Average Temperatures and Daylight in Iceland Throughout the Year",
  },
  series: {
    0: { axis: "Temps" },
    1: { axis: "Daylight" },
  },
  axes: {
    y: {
      Temps: { label: "Temps (Celsius)" },
      Daylight: { label: "Daylight" },
    },
  },
};

Intervals and Error Bars​

To add intervals or error bars to your chart, include additional columns in your data and specify the intervals option:

const data = [
  ["x", "values", { role: "interval" }, { role: "interval" }],
  [1, 100, 90, 110],
  [2, 120, 95, 130],
  [3, 130, 100, 140],
  [4, 90, 85, 95],
  [5, 70, 60, 75],
  [6, 30, 39, 22],
  [7, 80, 77, 83],
  [8, 60, 55, 60],
  [9, 100, 90, 110],
];

const options = {
  title: "Line Chart with Intervals",
  curveType: "function",
  intervals: { style: "line" },
};

Additional Resources​

Happy Charting!