Line Charts

Line charts are basic charts that are created by connecting the data points with straight or curved lines. They are commonly used to display the trend, fluctuations, and changes of data over time or another continuous variable. Using this type of chart, you can visualize the data trends that help you make better decisions and analyses.

SpreadJS allows you to add and customize the appearance of line charts by modifying various properties, including color palette, graph opacity, border style, line thickness, point symbols, tooltip style, and more. These modifications can be made either through code or by using the Inspector tab in the SpreadJS Designer.

An image of a line chart with symbols is shown below:

Line Chart with Symbols

Refer to the following sample code to add a line chart.

Note that this sample is based on the "salesTable" data from the Create Data Charts page. Therefore, make sure you have followed the primary steps mentioned on that page for adding a Data Chart. You can also customize the data source to meet your specific needs.

// 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 With Symbol",                        
        },                    
    },
    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,
                palette: [
                    "#88bde6",
                    "#fbb258",
                    "#90cd97",
                    "#f6aac9",
                    "#bfa554",
                    "#bc99c7"
                ],
                style: {
                    strokeWidth: 2,
                    symbolShape: GC.Spread.Sheets.DataCharts.SymbolShape.dot,
                    symbolSize: 10,
                },
                symbols: true,                            
            }
        }
    ]
});