Trend / Beginner

Line Chart

Compare one or more ordered series with connected points.

Back to collection

Interactive Chart Preview

JAVASCRIPT
Live, interactive exampleChart.js

Chart.js Code Example

JAVASCRIPT
import Chart from 'chart.js/auto';

// Illustrative data used by the live preview.
const chartData = {
  "categoryLabel": "Month",
  "labels": [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun"
  ],
  "datasets": [
    {
      "label": "Revenue",
      "data": [
        65,
        59,
        80,
        81,
        56,
        55
      ],
      "fill": false,
      "borderColor": "#3b82f6",
      "backgroundColor": "#3b82f6",
      "tension": 0
    }
  ]
};

function createConfig(chartData) {
    let chartType = 'bar';
    let options = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
            },
            tooltip: {
                mode: 'index',
                intersect: false,
            },
        },
    };
    chartType = 'line';
    options.scales = {
        y: {
            beginAtZero: true,
            title: { display: true, text: chartData.datasets.length === 1 ? chartData.datasets[0].label : 'Value (Same Units)' },
            grid: { color: 'rgba(0, 0, 0, 0.1)' },
        },
        x: {
            title: { display: true, text: chartData.categoryLabel },
            grid: { display: false },
        },
    };
    options.interaction = { intersect: false };
    return { type: chartType, data: structuredClone(chartData), options };
}

const chart = new Chart(document.getElementById('myChart'), createConfig(chartData));

Preview and code follow the same library selection.

Run This Example

Install the package below in a browser project such as Vite. Put the copied code in a client JavaScript module and add this container to the page before the module runs.

npm install chart.js@4.5.1
<div style="height:320px"><canvas id="myChart"></canvas></div>

The example includes its sample data. When removing the chart, destroy or dispose of its instance and disconnect any resize observer.

Reading This Example

In the default Chart.js example, the illustrative Revenue series starts at 65 in January, reaches its highest observed value of 81 in April, and ends at 55 in June. The straight segments connect six monthly observations. This example is not a forecast.

All library tabs use these illustrative values. Rendering styles and library APIs differ, so use the table to compare exact numbers.

About this example & sample data
Sample values used in the chart
MonthRevenue
Jan65
Feb59
Mar80
Apr81
May56
Jun55

READ THE CHART

Read the Direction of Change

A line chart connects observations in a meaningful order, usually time. It helps you see a rising or falling trend, a turning point, or a repeated pattern. Each point is an observation; the line between points helps you follow the sequence.

01

Keep Time in Order

Use dates or another ordered variable on the horizontal axis and a numeric measure on the vertical axis. This editor spaces rows equally and keeps table order, including repeated labels. Use evenly spaced observations here; date-like labels are not parsed into a time scale. Use a bar chart for categories that have no natural order.

02

Read the Points First

Check the starting value, the ending value, and the highest and lowest observations. Straight segments connect the supplied values. They do not create additional observations, estimate values between points, or forecast the next one.

03

Make Scale Choices Clear

Use Add Series to compare up to 20 named series on one vertical scale. Every series must use the same units and have a value for each row. Empty cells are invalid drafts and keep the previous chart visible. Enter zero only when zero was observed; this editor does not model missing-data gaps.

04

Choose a Useful Alternative

Use an area chart when the magnitude above a baseline matters. Use bars when individual period totals are the main comparison. For many overlapping series, separate small charts are often easier to read.

Edit Chart Data