[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

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.

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

// 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.

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

The nesting order defines the grouping hierarchy.

image

Line Aspect

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


Line Aspect

Sample

Default

image

Spline

image

StepCenter

image

StepLeft

image

StepRight

image

BezierCurve

image

If lineAspect is set to null or undefined, the chart renders using the Default behavior.

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.

image

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.

image