Line Charts

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.

Line Chart

A basic line chart displays aggregated values across categories. Each data point is connected to illustrate the overall trend.

// 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" },
      details: [{ field: 'Region' }],
      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.

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

The nesting order defines the grouping hierarchy.

Line Aspect

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

Example

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

Symbols and Line Style

Line charts allow customization of line thickness and symbol appearance.

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.

Color Palette

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

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

The palette is applied in order to the generated series.