Area Charts

Area charts are used to represent the change in one or more data quantities over time. Similar to line charts, area charts plot data points and connect them with line segments, filling the area between the line and the x-axis with color. This filled area helps illustrate the magnitude of values at different times.

SpreadJS supports various types of area charts that can be customized by modifying chart properties, such as set color palette, graph opacity, border style, category and value axes styles, and so on. These modifications can be done either through code or by using the Inspector tab in the SpreadJS Designer.

type=note
All of the samples in this topic are 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.

Area Chart

An area chart displays quantitative data over a continuous interval or time period. In this type of chart, the area between the x-axis and the line representing the data is filled with color, making it easy to see the magnitude of values and how they change over time or across different categories. Area charts are effective for showing trends over time, highlighting total values across categories, and comparing contributions of different components to a whole.

An image of an area chart is shown below:

Area chart

Refer to the following sample code to add an area chart.

// Area Chart
const sheet = spread.getActiveSheet();
sheet.name("Area Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
     tableName: 'Sales',
     config: {
         header: {
             title: "Area Chart"
         },
     },
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.area,
             encodings: {
                 category: {
                     field: "Salesman"
                 },
                 values: [
                     {
                         field: "Sales",
                         aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                     }
                 ],
                 color: {
                     field: "Product"
                 },
                 filter: {
                     operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                     conditions: [
                         {
                             field: "Region",
                             excludeMatched: false,
                             operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                             value: ["East"]
                         }
                     ]
                 }
             },
             config: {
                 axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
             }
         }
     ]
});

Range Area Chart

A range area chart represents data ranges over a continuous interval or time period. Instead of a single line or area representing a data series, range area charts have two lines or areas that form a shaded region to show the range between the minimum and maximum values.

This type of chart is particularly useful for understanding the variability or spread of values. By showing the range between the minimum and maximum values, range area charts provide a clear visual representation of the data distribution and fluctuations over time or across categories.

Range area charts are commonly used in finance, statistics, and project management to display data like fluctuating stock prices, temperature ranges, or production variability. They can effectively highlight the range of values within a dataset and provide insights into the variability and trends present in the data.

An image of a range area chart is shown below:

Range Area Chart

Refer to the following sample code to add a range area chart.

// Range Area Chart
const sheet = spread.getActiveSheet();
sheet.name("Range Area Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Range Area Chart"
        },
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.rangeArea,
            encodings: {
                category: {
                    field: "Salesman"
                },
                details: [{
                    field: "Product"
                }],
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    },
                    {
                        field: "Return",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                filter: {
                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                    conditions: [
                        {
                            field: "Region",
                            excludeMatched: false,
                            operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                            value: ["East"]
                        }
                    ]
                }
            },
            config: {
                axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
            }
        }
    ]
});

Stacked Area Chart

A stacked area chart displays multiple data series stacked on top of one another, with each series represented by a different colored area. The areas accumulate, showing the total value and making it easy to compare both the overall magnitude and the contribution of each series to the whole, over time or across categories.

In this type of chart, the total height at any given point represents the sum of all stacked values, with each segment indicating a different data series. This format allows users to see how the total is divided among the various series.

An image of a stacked area chart is shown below:

Stacked Area Chart

Refer to the following sample code to add a stacked area chart.

// Stacked Area Chart
const sheet = spread.getActiveSheet();
sheet.name("Stacked Area Chart");
const dataChart3 = sheet.dataCharts.add('data-chart-3', 10, 10, 600, 400);
dataChart3.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Stacked Area Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.stackedArea,
            encodings: {
                category: {
                    field: "Salesman"
                },
                color: {
                    field: "Product"
                },
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                filter: {
                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                    conditions: [
                        {
                            field: "Region",
                            excludeMatched: false,
                            operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                            value: ["North"]
                        }
                    ]
                }
            },
            config: {
                axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
            }
        }
    ]
});

Percent Stacked Area Chart

A percent stacked area chart combines the features of a stacked area chart with the added element of displaying the data in percentage terms. Each area of this chart represents the total value for a category or time period, while the individual segments within the area show the proportion of each sub-category as a percentage of the total.

This chart type is especially useful for comparing the total sizes of multiple categories or time periods, as well as understanding each category's relative distribution or composition in percentages. Percent stacked area charts, which display data in percentage terms, making it simple to graphically compare the relative contributions of different sub-categories across categories or time periods.

An image of a percent stacked area chart is shown below:

Percent Stacked Area Chart

Refer to the following sample code to add a percent stacked area chart.

// Percent Stacked Area Chart
const sheet = spread.getActiveSheet();
sheet.name("Percent Stacked Area Chart");
const dataChart4 = sheet.dataCharts.add('data-chart-4', 10, 10, 600, 400);
dataChart4.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Percent Stacked Area Chart"
        },
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.percentStackedArea,
            encodings: {
                category: {
                    field: "Salesman"
                },
                color: {
                    field: "Product"
                },
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                filter: {
                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                    conditions: [
                        {
                            field: "Region",
                            excludeMatched: false,
                            operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                            value: ["North"]
                        }
                    ]
                }
            },
            config: {
                axisMode: GC.Spread.Sheets.DataCharts.AxisMode.cartesian
            }
        }
    ]
});