Combo Charts

The Combo Chart provides a flexible visualization tool that combines multiple chart types (e.g., column, line, area) into a single, unified chart. This allows users to represent and compare different types of data—such as quantities, trends, or percentages—within one graphical display.

SpreadJS Combo Chart combines revenue columns, a customer satisfaction area plot, and a conversion line to compare regional sales and performance metrics.

Supported Chart Combinations

The following table lists which chart types can be combined in a single Combo Chart.

Primary Chart Type	Can Be Combined With	Example Combination(s)
Column	Column, Area, Line, Candlestick, OHLC
Bar	Bar	-
Area	Column, Area, Line, Candlestick, OHLC
Line	Column, Area, Line, Candlestick, OHLC
Pie	-	-
Radar	Radar	-
Scatter	Scatter	-
Treemap	-	-
Funnel	-	-
Waterfall	-	-
Candlestick, OHLC	Column, Area, Line, Candlestick, OHLC

Notes:
A Combo Chart supports a maximum of 4 subplots.
Some chart variations (for example, Range Column, Stacked Column and Percent Stacked Column) share the same combination rules.
Examples combining the same chart type are not listed here. For displaying multiple series of the same type, it’s generally better to use a chart with multiple value fields rather than a combo chart configuration.

Combo Chart Configuration

The table below summarizes property scope and synchronization behavior of Combo Chart.

Some settings are synchronized across all plots (marked as Common), while others can be customized independently per plot (marked as Independent).

Property	Scope	Notes
Chart Name	Independent	Sets the unique chart name of the current plot.
Chart Type	Independent	-
Category	Common	All plots in a Combo Chart share the same category encoding field.
Value	Independent	At least one is needed.
Chart Style	Independent	-
Data Labels	Independent	-
Tool Tip	Independent	-
Animation	Independent	-
Legend	Independent	-
Appearance	Common	Affects the overall Combo Chart background and border appearance.
Title	Common	Shared chart title synchronized across all plots.
Layout	Common	Controls the Combo Chart’s position, width, and height within the sheet.
Category Axis	Common	Only one category X-axis panel exists. All plots must use this single category axis.
Value Axis	Independent/Common	Can be configured independently or shared across plots. Each plot can be bound to an independent value axis. Each axis supports its own scale and display settings.

Notes:
Only one dataset can be used in a single Combo Chart.
All plots share the same category axis; category changes affect every plot.
Global appearance changes (appearance, title, layout, category axis) synchronize across plots.

Tips:
Overlapping visual layers may cause plotted lines or points to obscure columns. Adjust transparency or order as needed.
Use separate value axes when plots represent metrics with different scales to improve readability.

About Trellis Binding in Combo Chart

Combo Charts support Trellis Binding. When using trellis binding in a Combo Chart, all plots should use the same row, column, and trellis configuration.

If different trellis settings are specified for different plots through the API, the trellis settings from the first plot are used, and subsequent trellis settings are ignored.

SpreadJS Combo Chart uses shared Trellis Binding to arrange column and line plots by North America and Europe rows and Retail and Online columns.

About Legend in Combo Chart

You can customize the legend for each plot individually, and the display order of legends follows the order in which the plots are created.

Notes:
Only plots with valid legend bindings will produce visible legends.
When multiple legends use the same position, their maximum size settings are resolved together for layout. For legends positioned on the left or right, the effective maxWidth is the smallest value among those legends. For legends positioned at the top or bottom, the effective maxHeight is the largest value among those legends.

// Example: plot1 and plot2 use independent legned settings.
{
  plotAreas: [{
    legends: [
      { type: "Color", position: "Bottom" }, // plot1
      { type: "Color", position: "Top" }     // plot2
    ]
  }]
}

About Value Axes in Combo Chart

A combo chart supports multiple value axes so that data series with different value ranges can be displayed within the same chart.

Axis Binding Rules

Each plot must be linked to at least one value axis.
Up to four axes (Y1–Y4) are available.
By default, all value fields share a common axis (Y1).
The binding order cannot be manually specified. Axes are automatically assigned in the sequence Y1 to Y4, which does not affect the chart output.
Unused axes remain hidden from the chart.

Axis Customization

Each axis can be configured independently.

The following examples illustrate how to configure shared and independent value axes in a combo chart.

// Example 1: plot1 and plot2 share the same value axis
{
    axes: [{
        plots: ["plot1", "plot2"],
        type: "Y"
    }]
}
// Example 2: plot1 and plot2 use independent value axes
{
    axes: [{
        plots: ["plot1"],
        type: "Y"
    }, {
        plots: ["plot2"],
        type: "Y"
    }]
}

Example: Three‑Plot Combo Chart

This combo chart combines a column plot with an area plot for customer satisfaction and a line plot for conversion rate.

It demonstrates how up to three plots can be visualized together, balancing both value‑based and percentage‑based metrics across regions.

const sheet = spread.getActiveSheet();
sheet.name("Combo Chart");
const dataManager = spread.dataManager();
function createSalesTable(dataManager) {
    return dataManager.addTable("Sales", {
        data: [
            {
                region: "East Coast",
                revenueA: 132489,
                revenueB: 89732,
                satisfaction: 0.84,
                conversion: 0.056
            },
            {
                region: "Midwest",
                revenueA: 115621,
                revenueB: 77484,
                satisfaction: 0.81,
                conversion: 0.049
            },
            {
                region: "South",
                revenueA: 141570,
                revenueB: 92596,
                satisfaction: 0.89,
                conversion: 0.061
            },
            {
                region: "West Coast",
                revenueA: 156343,
                revenueB: 102152,
                satisfaction: 0.91,
                conversion: 0.067
            },
            {
                region: "Canada",
                revenueA: 126481,
                revenueB: 83646,
                satisfaction: 0.87,
                conversion: 0.054
            }
        ],
    });
}
const SalesTable = createSalesTable(dataManager);
await SalesTable.fetch();
// Create combo data charts
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
    tableName: 'Sales',
    plots: [{
        name: "Product A & B Revenue",
        type: GC.Spread.Sheets.DataCharts.DataChartType.column,
        encodings: {
            values: [
                { field: "revenueA" },
                { field: "revenueB" }
            ],
            category: {
                field: "region"
            }
        },
        config: {
            palette: ['#A066C9', '#7885CB']
        }
    }, {
        name: "Customer Satisfaction",
        type: GC.Spread.Sheets.DataCharts.DataChartType.area,
        encodings: {
            values: [{
                field: "satisfaction"
            }]
        },
        config: {
            palette: ['#F7F7F7']
        }
    }, {
        name: "Conversion Rate",
        type: GC.Spread.Sheets.DataCharts.DataChartType.line,
        encodings: {
            values: [{
                field: "conversion"
            }]
        },
        config: {
            palette: ['#4CAF50']          //#E5C103    
        }
    }],
    config: {
        header: {
            title: "Regional Sales & Performance Overview",
            padding: {
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
            },
            textStyle: {
                color: 'black',
                fontSize: 24,
                fontFamily: 'Verdana',
                fontWeight: 'Bold'
            }
        },
        plotAreas: [{
            axes: [{
                plots: ["Product A & B Revenue"],
                type: GC.Spread.Sheets.DataCharts.AxisType.y,
                format: {
                    type: GC.Spread.Sheets.DataCharts.FormatType.thousands,
                    value: "$0.0 K"
                }
            }, {
                plots: ["Customer Satisfaction"],
                type: GC.Spread.Sheets.DataCharts.AxisType.y,
                position: GC.Spread.Sheets.DataCharts.AxisPosition.none
            }, {
                plots: ["Conversion Rate"],
                type: GC.Spread.Sheets.DataCharts.AxisType.y,
                position: GC.Spread.Sheets.DataCharts.AxisPosition.none
            }]
        }]
    }
});

SpreadJS three-plot Combo Chart compares two regional revenue column series with a customer satisfaction area and conversion-rate line using configured value axes.