Line and Area Charts

Learn how to create line and area charts with Highcharts, including configuration options and code examples

Line and area charts are fundamental chart types for displaying trends over time or across categories. Line charts connect data points with lines, while area charts fill the space between the line and the axis.

Line Charts

Line charts are ideal for showing trends and changes over time. They connect individual data points with a continuous line.

Basic Line Chart

Basic Line Chart

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Monthly Sales Data'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    title: {
      text: 'Sales'
    }
  },
  series: [{
    name: 'Product A',
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
  }, {
    name: 'Product B',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5]
  }]
});

Line Chart Configuration Options

Key configuration options for line charts:

lineWidth

The width of the line connecting data points. Default is 2.

plotOptions: {
  line: {
    lineWidth: 3
  }
}

marker

Options for the point markers. Can be enabled/disabled and customized.

plotOptions: {
  line: {
    marker: {
      enabled: true,
      radius: 5,
      symbol: 'circle'
    }
  }
}

dashStyle

A name for the dash style to use for the graph. Options include ‘Solid’, ‘ShortDash’, ‘Dot’, etc.

series: [{
  dashStyle: 'ShortDash',
  data: [1, 2, 3, 4]
}]

Area Charts

Area charts display quantitative data visually by filling the area between the line and the axis.

Basic Area Chart

Simple Area

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'Area Chart Example'
  },
  series: [{
    name: 'Series 1',
    data: [0, 5, 3, 5]
  }]
});

Area Chart Configuration Options

Key configuration options from ~/workspace/source/ts/Series/Area/AreaSeriesDefaults.ts:46-170:

fillColor · string | object

Fill color or gradient for the area. When undefined, the series color is used with fillOpacity.

fillOpacity · number · default: "0.75"

Fill opacity for the area. Default is 0.75 for both Highcharts and Highstock.

lineColor · string

A separate color for the graph line. Allows setting a separate color for the line without altering the fillColor.

threshold · number · default: "0"

The Y axis value to serve as the base for the area, for distinguishing between values above and below a threshold.

trackByArea · boolean · default: "false"

Whether the whole area or just the line should respond to mouseover tooltips and other mouse or touch events.

Stacked Area Chart

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  plotOptions: {
    area: {
      stacking: 'normal'
    }
  },
  series: [{
    name: 'Asia',
    data: [502, 635, 809, 947, 1402, 3634, 5268]
  }, {
    name: 'Africa',
    data: [106, 107, 111, 133, 221, 767, 1766]
  }, {
    name: 'Europe',
    data: [163, 203, 276, 408, 547, 729, 628]
  }]
});

Spline Variants

Both line and area charts have spline variants that create smooth curves instead of straight lines.

Spline

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  series: [{
    data: [1, 3, 2, 4, 5, 4, 6]
  }]
});

Area Spline

Highcharts.chart('container', {
  chart: {
    type: 'areaspline'
  },
  series: [{
    data: [1, 3, 2, 4, 5, 4, 6]
  }]
});

Use Cases

Line Charts

• Time series data
• Stock prices
• Temperature trends
• Sales over time

Area Charts

• Showing magnitude of change
• Cumulative totals
• Part-to-whole relationships
• Comparing multiple data series

Data Formats

Line and area charts support multiple data formats:

1. Array of numbers: data: [0, 5, 3, 5]
2. Array of arrays: data: [[0, 9], [1, 7], [2, 6]]
3. Array of objects: data: [{x: 1, y: 9, name: "Point2"}, {x: 1, y: 6, name: "Point1"}]

For datetime axes, x values should be timestamps in milliseconds.