# Line Charts

SpreadJS provides line charts that are created by connecting the data points with straight or curved lines. 

## Content

**Line charts** connect data points with lines to show how values change across categories or over time. They are commonly used to visualize trends, fluctuations, and directional movement in business, financial, and operational data.
SpreadJS allows you to customize line charts by modifying properties such as the color palette, line thickness, symbol display, tooltip style, and axis appearance, either through code or by using the Inspector tab in the SpreadJS Designer.

>type=note
> **Note:** The samples in this topic use the Sales table introduced in Bind Data Source. Ensure that the data source has been configured before adding a chart.

## Line Chart

A basic line chart displays aggregated values across categories. Each data point is connected to illustrate the overall trend.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.80667b.png?width=550)

```javascript
// Line Chart
const sheet = spread.getActiveSheet();
sheet.name("Line Chart");

const dataChart = sheet.dataCharts.add(
  'data-chart',
  10, 10, 600, 400
);

dataChart.setChartConfig({
  tableName: 'Sales',
  config: {
    header: {
      title: "Line Chart"
    }
  },
  plots: [{
    type: GC.Spread.Sheets.DataCharts.DataChartType.line,
    encodings: {
      category: { field: "Product" },
      color: { field: "Region" },
      values: [{
        field: "Sales",
        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
      }]
    },
    config: {
      axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
    }
  }]
});
```

### Line Chart with Hierarchical Category

Line charts support hierarchical category grouping.

```javascript
category: {
  field: "ProductCategory",
  child: {
    field: "Product"
  }
}
```

The nesting order defines the grouping hierarchy.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.7d31e9.png?width=550)

## Line Aspect

Line charts support the `lineAspect` property, which controls how data points are connected and rendered.

| Line Aspect | Sample |
| ----------- | ------ |
| Default | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.c76d2c.png?width=400) |
| Spline | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.d65c22.png?width=400) |
| StepCenter | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.e1c60b.png?width=400) |
| StepLeft | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.3c973a.png?width=400) |
| StepRight | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.fb19bb.png?width=400) |
| BezierCurve | ![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.00327e.png?width=400) |

>type=note
> If `lineAspect` is set to `null` or `undefined`, the chart renders using the `Default` behavior.

**Example**

```javascript
config: {
  lineAspect: GC.Spread.Sheets.DataCharts.LineAspect.Spline
}
```

## Symbols and Line Style

Line charts allow customization of line thickness and symbol appearance.

```javascript
config: {
  style: {
    strokeWidth: 2,
    symbolShape: GC.Spread.Sheets.DataCharts.SymbolShape.dot,
    symbolSize: 10
  },
  symbols: true
}
```

* `strokeWidth` controls the thickness of the line.
* `symbolShape` defines the marker shape.
* `symbolSize` controls marker size.
* `symbols` enables or disables symbol display.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.0057e7.png?width=550)

## Color Palette

The `palette` property defines the color sequence used for multiple series.

```javascript
config: {
  palette: [
    "#88bde6",
    "#fbb258",
    "#90cd97",
    "#f6aac9",
    "#bfa554",
    "#bc99c7"
  ]
}
```

The palette is applied in order to the generated series.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.4f0020.png?width=550)