> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/highcharts/highcharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```javascript Basic Line Chart theme={null}
  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]
    }]
  });
  ```

  ```javascript With Markers theme={null}
  Highcharts.chart('container', {
    chart: {
      type: 'line'
    },
    series: [{
      data: [1, 3, 2, 4, 5, 4, 6],
      marker: {
        enabled: true,
        radius: 4,
        symbol: 'circle'
      }
    }]
  });
  ```
</CodeGroup>

### Line Chart Configuration Options

Key configuration options for line charts:

<AccordionGroup>
  <Accordion title="lineWidth">
    The width of the line connecting data points. Default is 2.

    ```javascript theme={null}
    plotOptions: {
      line: {
        lineWidth: 3
      }
    }
    ```
  </Accordion>

  <Accordion title="marker">
    Options for the point markers. Can be enabled/disabled and customized.

    ```javascript theme={null}
    plotOptions: {
      line: {
        marker: {
          enabled: true,
          radius: 5,
          symbol: 'circle'
        }
      }
    }
    ```
  </Accordion>

  <Accordion title="dashStyle">
    A name for the dash style to use for the graph. Options include 'Solid', 'ShortDash', 'Dot', etc.

    ```javascript theme={null}
    series: [{
      dashStyle: 'ShortDash',
      data: [1, 2, 3, 4]
    }]
    ```
  </Accordion>
</AccordionGroup>

## Area Charts

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

### Basic Area Chart

<CodeGroup>
  ```javascript Simple Area theme={null}
  Highcharts.chart('container', {
    chart: {
      type: 'area'
    },
    title: {
      text: 'Area Chart Example'
    },
    series: [{
      name: 'Series 1',
      data: [0, 5, 3, 5]
    }]
  });
  ```

  ```javascript With Custom Fill theme={null}
  Highcharts.chart('container', {
    chart: {
      type: 'area'
    },
    plotOptions: {
      area: {
        fillColor: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
          stops: [
            [0, 'rgba(124, 181, 236, 0.5)'],
            [1, 'rgba(124, 181, 236, 0)']
          ]
        },
        lineColor: '#7cb5ec',
        lineWidth: 2
      }
    },
    series: [{
      data: [1, 3, 2, 4, 5, 4, 6]
    }]
  });
  ```
</CodeGroup>

### Area Chart Configuration Options

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

<ParamField path="fillColor" type="string | object">
  Fill color or gradient for the area. When undefined, the series color is used with fillOpacity.
</ParamField>

<ParamField path="fillOpacity" type="number" default="0.75">
  Fill opacity for the area. Default is 0.75 for both Highcharts and Highstock.
</ParamField>

<ParamField path="lineColor" type="string">
  A separate color for the graph line. Allows setting a separate color for the line without altering the fillColor.
</ParamField>

<ParamField path="threshold" type="number" default="0">
  The Y axis value to serve as the base for the area, for distinguishing between values above and below a threshold.
</ParamField>

<ParamField path="trackByArea" type="boolean" default="false">
  Whether the whole area or just the line should respond to mouseover tooltips and other mouse or touch events.
</ParamField>

### Stacked Area Chart

```javascript theme={null}
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.

<Tabs>
  <Tab title="Spline">
    ```javascript theme={null}
    Highcharts.chart('container', {
      chart: {
        type: 'spline'
      },
      series: [{
        data: [1, 3, 2, 4, 5, 4, 6]
      }]
    });
    ```
  </Tab>

  <Tab title="Area Spline">
    ```javascript theme={null}
    Highcharts.chart('container', {
      chart: {
        type: 'areaspline'
      },
      series: [{
        data: [1, 3, 2, 4, 5, 4, 6]
      }]
    });
    ```
  </Tab>
</Tabs>

## Use Cases

<CardGroup cols={2}>
  <Card title="Line Charts" icon="chart-line">
    * Time series data
    * Stock prices
    * Temperature trends
    * Sales over time
  </Card>

  <Card title="Area Charts" icon="chart-area">
    * Showing magnitude of change
    * Cumulative totals
    * Part-to-whole relationships
    * Comparing multiple data series
  </Card>
</CardGroup>

## 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"}]`

<Note>
  For datetime axes, x values should be timestamps in milliseconds.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.