Apply and Customize Color Schemes

A color scheme is a set of coordinating colors used to enhance the appearance of the charts. To change the color scheme of charts, as per your preferences, use the ColorScheme property of the GC.Spread.Sheets.Charts class.

The GIF below applies different color schemes to a chart.

Chart-ColorScheme

Apply Built-in Color Schemes

SpreadJS enables you to easily apply the chart's built-in color scheme using any of the built-in options, such as colorfulPalette1, colorfulPalette2, colorfulPalette3, monochromaticPalette1, monochromaticPalette2, monochromaticPalette3, etc. The default color scheme of a chart is colorfulPalette1.

The following code sample depicts how to apply a built-in color scheme:

// Apply a color scheme.
var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 100, 600, 400, "A1:D4");
chart.colorScheme(GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette2);

Customize Color Schemes

You can customize your own color schemes using the GC.Spread.Sheets.Charts.ColorRule enumeration. The table below lists the available ColorRule enumeration values:

ColorRule	Description
cycle	Select a color from the color list in sequence to apply to each series in the chart. When the last color in the list is selected, start again from the first color.
withinLinear	Select a color at evenly spaced index positions between the darkest and brightest colors in the color list and apply these colors to the chart series.
acrossLinear	Similar to withinLinear, select a color at evenly spaced index positions between the darkest and brightest colors in the color list and apply the color to the chart series. If there are multiple color lists, such as Color List 1 and Color List 2, colors are selected alternately from the darkest to brightest shades of Color List 1 and Color List 2, in the order of the darkest color from Color List 1 and the darkest color from Color List 2.
withinLinearReversed	Select a color at evenly spaced index positions between the brightest to the darkest colors in the color list, in reverse order to withinLinear, and apply them to the chart series.
acrossLinearReversed	Opposite to acrossLinear, select a color at evenly spaced index positions between the brightest and darkest colors in the color list, and apply it to the chart series. If there are multiple color lists, such as Color List 1 and Color List 2, colors are selected alternately from the brightest to darkest shades of color lists 1 and 2, in the order of the brightest color in Color List 1 and the brightest color in Color List 2.

The following code sample depicts how to define and apply a custom color scheme:

// Customize the color scheme.
var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 100, 600, 400, "A1:D4");
let myColorScheme = [GC.Spread.Sheets.Charts.ColorRule.cycle, ["#00aefe", "#3368e7", "#8e43e6", "#b74592", "#ff4f80", "#ff6d5f", "#ffc268", "#2cde98", "#1dc7d1"]];
chart.colorScheme(myColorScheme);

Retrieving Colors from a Custom Scheme

You can use the getColor() method to get a color specified in the color scheme.

The following code sample depicts how to fetch a color from the color scheme using the getColor() method:

// Customize the color scheme.
var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 100, 600, 400, "A1:D4");
let myColorScheme = [GC.Spread.Sheets.Charts.ColorRule.cycle, ["#00aefe", "#3368e7", "#8e43e6", "#b74592", "#ff4f80", "#ff6d5f", "#ffc268", "#2cde98", "#1dc7d1"]];

// Get the color at index 3 from the color scheme.
let color = GC.Spread.Sheets.Charts.getColor(myColorScheme, 3);

Note that changing the color scheme does not update the colors of existing series or data points. It only takes effect when you add new series or data points. If you want to apply the new color scheme immediately, you need to reset the colors of the series or data points as shown in the following code sample:

// Reset series or data points colors.
function resetSeriesColor (chart, colorScheme) {
        let series = chart.series().get();
        for (let i = 0, len = series.length; i < len; i++) {
            let seriesItem = series[i];
            seriesItem.backColor = GC.Spread.Sheets.Charts.getColor(colorScheme, i, len);
            chart.series().set(i, seriesItem);
        }
}