Column Charts

Column charts are a useful way to compare categorical data through vertical bars. In these charts, categories are plotted on the x-axis, and data values are displayed on the vertical axis. Column charts are particularly helpful where the number of values is too large to be used on an x-axis. For example, the population share of different countries across the globe can be represented using a column chart.

SpreadJS supports various types of column charts, which you can customize by modifying chart properties, such as set color palette, graph opacity, border style, corner radius, and so on, either through code or 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.

Column Chart

A column chart is a common data visualization tool that compares different categories or displays trends over time. It consists of vertical bars where the height of each bar represents the value of the corresponding category, which allows a straightforward comparison between data points.

An image of a column chart is shown below:

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

// Column Chart
const sheet = spread.getActiveSheet();
sheet.name("Column Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Column Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.column,
            encodings: {
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                category: {
                    field: "Product"
                },
                color: {
                    field: "Product"
                }
            }
        }
    ]
});

Range Column Chart

A range column chart displays ranges of data instead of individual data points. In this chart, each column represents a range of values, which is shown as a vertical bar with a starting point and an ending point, indicating the minimum and maximum values within that range.

This type of chart is useful for visualizing data where the exact values within a range are important. They are effective in comparing ranges across categories or time periods and are commonly used in finance, statistics, and project management to display data such as high and low values, target ranges, or confidence intervals.

An image of a range column chart is shown below:

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

// Range Column Chart
const sheet = spread.getActiveSheet();
sheet.name("Range Column Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart2.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Range Column Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.rangeColumn,
            encodings: {
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    },
                    {
                        field: "Return",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                category: {
                    field: "Product"
                },
                color: {
                    field: "Product"
                }
            }

        }
    ]
});

Stacked Column Chart

A stacked column chart displays and compares the total size of different categories while also showing the composition of each category as parts of a whole. Each column in this type of chart represents a category, and the different data series are stacked on top of one another. The height of each column shows the total value of the category, while the segments show the contribution of each sub-category to that total.

Stacked column charts are useful for displaying the relationship between individual items and the total as well as allowing for easy comparison of the total size and the relative proportions of the sub-categories within each total.

An image of a stacked column chart is shown below:

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

// Stacked Column Chart
const sheet = spread.getActiveSheet();
sheet.name("Stacked Column Chart");
const dataChart3 = sheet.dataCharts.add('data-chart-3', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart3.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: 'Stacked Column Chart'
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.stackedColumn,
            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Region' },
                color: { field: 'Product' },
            }
        }
    ]
});

Percent Stacked Column Chart

A percent stacked column chart is similar to a regular stacked column chart but displays data in percentage terms. In this chart, the height of each column represents the total value for that category, while the individual segments within the column show the proportion of each sub-category as a percentage of the total.

Percent stacked column charts are helpful when you want to compare the total sizes of different categories and also understand the relative distribution or composition of each category in terms of percentages. This type of chart provides a clearer picture of the overall distribution of data by allowing for easy comparisons of the relative contributions of different sub-categories across categories.

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

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

// Percent Stacked Column Chart
const sheet = spread.getActiveSheet();
sheet.name("Percent Stacked Column Chart");
const dataChart4 = sheet.dataCharts.add('data-chart-3', 10, 10, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
dataChart4.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: 'Percent Stacked Column Chart'
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.percentStackedColumn,

            encodings: {
                values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                category: { field: 'Region' },
                color: { field: 'Product' },
            }
        }
    ]
});