# Apply and Customize Color Schemes

## Content

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](/spreadjs/api/v17/modules/GC.Spread.Sheets.Charts) class.
The GIF below applies different color schemes to a chart.

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.504e3e.png?width=900)

## 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:

```javascript
// 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:

```javascript
// 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:

```javascript
// 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:

```javascript
// 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);
        }
}
```