# Area Charts SpreadJS supports various types of area charts used to represent the change in one or more data quantities over time. ## Content **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 > **Notes:** > > * All samples in this topic use the Sales table introduced in the [Create Data Charts](/spreadjs/docs/v19/features/data-charts/create-data-charts) topic. Ensure that the data source has been configured before adding a chart. > * For details about category and value encodings, see [Bind Data Source](/spreadjs/docs/v19/features/data-charts/data-binding). ## 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: ![SpreadJS Area DataChart compares aggregated Sales by Salesman and Product for the East region using filled Cartesian data series.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Area%20chart.c3c4de.png?width=550) Refer to the following sample code to add an area chart. ```javascript // 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 } ], details: [{ field: 'Product' }], 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 } } ] }); ``` ### Area with Hierarchical Category Area charts support hierarchical category grouping. ```javascript category: { field: "Salesman", child: { field: "ProductCategory" } } ``` ![SpreadJS Area DataChart organizes its category axis into hierarchical Salesman and ProductCategory levels for detailed grouped data analysis.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.94904f.png?width=550) ## Range Area Chart A range area chart shows the spread between a lower value and an upper value across categories. Instead of plotting a single series, it fills the area between two boundaries to emphasize variation. Starting with SpreadJS v19.1, a Range Area chart binds the lower and upper fields as one logical range value. An image of a range area chart is shown below: ![SpreadJS Range Area DataChart fills the aggregated interval between Return and Sales values for each Salesman and Product in the East region.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Range%20Area%20Chart.e4ae57.png?width=550) Refer to the following sample code to add a range area chart. ```javascript // 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" }, values: [{ vectors: { lower: { field: "Return" }, upper: { field: "Sales" } }, aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }], details: [{ field: 'Product' }], 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 } } ] }); ``` ## Positive and Negative Colors Area and Range Area charts support positive and negative colors to distinguish values based on their position relative to the baseline or their range relationship. The first color in the plot palette is used as the positive color, and the second color is used as the negative color. Set `usePositiveNegativeColors` to `true` in the plot configuration to enable positive and negative colors. ```javascript config: { palette: ['#4CAF50', '#F44336'], usePositiveNegativeColors: true } ``` For Area charts, the positive color is applied to the portion above the baseline, and the negative color is applied to the portion below the baseline. The baseline defaults to 0 and can be adjusted by the axis origin. ![SpreadJS Area DataChart uses green fill above the baseline and red fill below it to distinguish positive and negative values.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260713.9d2fa3.png?width=500) For Range Area charts, the positive color is used when the upper value is greater than or equal to the lower value. The negative color is used when the upper value is less than the lower value. ![SpreadJS Range Area DataChart colors ranges according to whether each upper value is greater than or less than its lower value.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260713.1a023e.png?width=500) >type=note > When positive and negative colors are enabled, color encoding does not take effect. ## 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: ![SpreadJS Stacked Area DataChart displays aggregated North-region Sales by Salesman, with colored Product series accumulating to show totals and contributions.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Stacked%20Area%20Chart.6a3bbd.png?width=550) Refer to the following sample code to add a stacked area chart. ```javascript // 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" }, values: [ { field: "Sales", aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum } ], details: [{ field: 'Product' }], color: { field: "Product" }, 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: ![SpreadJS Percent Stacked Area DataChart normalizes North-region Sales by Salesman to compare each Product’s proportional contribution across categories.](https://cdn.mescius.io/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/Percent%20Stacked%20Area%20Chart.6bf480.png?width=550) Refer to the following sample code to add a percent stacked area chart. ```javascript // 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" }, values: [ { field: "Sales", aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum } ], details: [{ field: 'Product' }], color: { field: "Product" }, 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 } } ] }); ``` ## Line Aspect Area-based charts support the `lineAspect` property, which controls how lines are rendered between data points. ### Line Aspect Support Matrix | Chart Type | Default | Spline | StepLeft | StepRight | StepCenter | Bezier | | ---------- | ------- | ------ | -------- | --------- | ---------- | ------ | | Area | ![SpreadJS Area DataChart uses the Default lineAspect to connect data points with standard line segments above the filled area.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.d7b797.png?width=100) | ![SpreadJS Area DataChart uses the Spline lineAspect to connect data points with a smooth curved boundary above the filled area.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.27423d.png?width=100) | ![SpreadJS Area DataChart uses the StepLeft lineAspect to render left-aligned step transitions between data points in the filled series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.4e9a03.png?width=100) | ![SpreadJS Area DataChart uses the StepRight lineAspect to render right-aligned step transitions between data points in the filled series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.1098a2.png?width=100) | ![SpreadJS Area DataChart uses the StepCenter lineAspect to place step transitions midway between adjacent data points in the filled series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.804480.png?width=100) | ![SpreadJS Area DataChart uses the Bezier lineAspect to draw a curved boundary through data points above the filled chart area.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.2163ab.png?width=100) | | Range Area | ![SpreadJS Range Area DataChart uses the Default lineAspect for the upper and lower boundaries enclosing the filled value interval.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.ee60da.png?width=100) | ![SpreadJS Range Area DataChart uses the Spline lineAspect to create smooth upper and lower boundaries around the filled value interval.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.08abe6.png?width=100) | Not supported | Not supported | Not supported | ![SpreadJS Range Area DataChart uses the Bezier lineAspect to curve both boundaries around the filled interval between lower and upper values.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.b3bb97.png?width=100) | | Stacked Area | ![SpreadJS Stacked Area DataChart uses the Default lineAspect to connect values across multiple accumulated data series with standard segments.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.29a986.png?width=100) | ![SpreadJS Stacked Area DataChart uses the Spline lineAspect to render smooth boundaries between accumulated data series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.d19597.png?width=100) | ![SpreadJS Stacked Area DataChart uses the StepLeft lineAspect to render left-aligned transitions across each accumulated data series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.5d2459.png?width=100) | ![SpreadJS Stacked Area DataChart uses the StepRight lineAspect to render right-aligned transitions across each accumulated data series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.91be23.png?width=100) | ![SpreadJS Stacked Area DataChart uses the StepCenter lineAspect to position step transitions midway between categories in every accumulated series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.207a65.png?width=100) | ![SpreadJS Stacked Area DataChart uses the Bezier lineAspect to create curved boundaries across multiple accumulated data series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.b695eb.png?width=100) | | Percent Stacked Area | ![SpreadJS Percent Stacked Area DataChart uses the Default lineAspect to connect normalized percentage series with standard line segments.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.278871.png?width=100) | ![SpreadJS Percent Stacked Area DataChart uses the Spline lineAspect to render smooth boundaries between normalized percentage series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.75c44a.png?width=100) | ![SpreadJS Percent Stacked Area DataChart uses the StepLeft lineAspect to display left-aligned transitions across normalized percentage series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.974864.png?width=100) | ![SpreadJS Percent Stacked Area DataChart uses the StepRight lineAspect to display right-aligned transitions across normalized percentage series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.0a196a.png?width=100) | ![SpreadJS Percent Stacked Area DataChart uses the StepCenter lineAspect to position transitions midway between categories in normalized percentage series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.36b12f.png?width=100) | ![SpreadJS Percent Stacked Area DataChart uses the Bezier lineAspect to draw curved boundaries across normalized percentage data series.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260420.40e414.png?width=100) | ### Example ```javascript dataChart.setChartConfig({ tableName: 'Sales', plots: [{ type: GC.Spread.Sheets.DataCharts.DataChartType.area, config: { lineAspect: GC.Spread.Sheets.DataCharts.LineAspect.Spline } }] }); ``` If `lineAspect` is not specified, or if it is set to `null` or `undefined`, the chart uses the `Default` behavior. Stacked Area and Percent Stacked Area render lineAspect in the same manner as the standard Area chart.