Color Palette

In the process of data visualization, color is an extremely critical element. Choosing the right colors for a chart to highlight the characteristics of the data and match it appropriately is an art in data visualization. VChart provides users with powerful and flexible color palette features to meet the color needs of various application scenarios.

This tutorial will provide an in-depth analysis of the design and application of VChart's chart color palette and help users master the palette functions through practical examples.

Concept of Color Palette

Before introducing the configuration of the color palette, we need to first understand the basic concept of the color palette.

VChart supports two types of color palettes:

Data Palette: Assign colors to data items according to the number of data categories. The data palette is an ordered array containing several colors, such as ['red', 'blue', 'green'].
Semantic Palette: Support semantization of commonly used color values and use them anywhere in the chart spec to unify the color style. That is to assign meaningful names to colors to make them easier to maintain and modify.

We will introduce the configuration methods of these two palettes separately below.

Palette Configuration in Theme

VChart's color palette feature is provided through theme configuration, that is, the ITheme.colorScheme configuration item (see the previous section). The type of this configuration item is IThemeColorScheme, declared as:

type IThemeColorScheme = {
  /** Required */
  default: ColorScheme;
} & Partial<Record<SeriesTypeEnum, ColorScheme>>;

The palette configuration accepts an object containing a default palette (IThemeColorScheme.default) and specific palettes for different series.

For example, if you want the color palette of the word cloud series to be different from the default, you can configure it like this:

const colorScheme: IThemeColorScheme = {
  /** Default palette */
  default: ['red', 'blue', 'green'],
  /** Word cloud series dedicated palette */
  wordCloud: ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00']
};

These palette configurations have a ColorScheme type, declared as:

type ColorScheme = Array<string> | ProgressiveDataScheme<string> | IColorSchemeStruct;

This means that there are 3 types of palettes that can be configured, and data palettes and semantic palettes can be mixed and matched.

Data Palette

The data palette configuration includes ordinary palettes (of type Array<string>) and progressive palettes (of type ProgressiveDataScheme<string>).

Ordinary Palette

The ordinary palette is the simplest data palette type, consisting of a set of colors. For example:

const colorScheme: IThemeColorScheme = {
  /** Default palette */
  default: ['red', 'blue', 'green', '#98abc5', 'rgb(255, 128, 0)']
};

The ordinary palette can meet simple scenarios, such as line charts and bar charts where the data items are relatively fixed.

Progressive Palette

The type ProgressiveDataScheme<string> is a progressive palette. Progressive palettes allow for multiple sets of color schemes to exist simultaneously, and which color scheme to apply depends on the conditions given on the configuration or the user callback. The type definition of ProgressiveDataScheme is as follows:

/** Progressive data palette: consists of multiple palettes. When applied, it will judge the conditions attached to the palette (such as the `isAvailable` callback). If the conditions are met, the corresponding palette will be applied immediately */
type ProgressiveDataScheme<T> = Array<IProgressiveDataSchemeCase<T>>;

interface IProgressiveDataSchemeCase<T> {
  /** Optional, the maximum domain count suitable for this palette */
  maxDomainLength?: number;
  /** Optional, more flexible custom callback, returns whether to apply this palette. Will override maxDomainLength and other configurations */
  isAvailable?: boolean | ((domain: any[]) => boolean);
  /** Palette */
  scheme: T[];
}

Progressive palettes have richer features, allowing colors to be applied in stages based on the number of data categories. For example:

const colorScheme: IThemeColorScheme = {
  /** Default progressive palette */
  default: [
    {
      maxDomainLength: 3,
      scheme: ['#1f77b4', '#2ca02c', '#9467bd'] // Palette for 3 data items
    },
    {
      maxDomainLength: 5,
      scheme: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd'] // Palette for 5 data items, inserting other color values between adjacent color values
    },
    {
      isAvailable: domain => domain.length > 5,
      scheme: ['#1f77b4', '#8c564b', '#ff7f0e', '#e377c2', '#2ca02c', '#7f7f7f', '#d62728', '#bcbd22', '#9467bd'] // Complete palette
    }
  ]
};

Based on the above configuration, the chart will choose different data palettes in different scenarios. The performance below when the number of data items is small:

The performance below when the number of data items is large:

Semantic Palette

The semantic palette allows you to define a mapping table for common colors so that they can be used anywhere in the chart configuration.

To add a semantic palette to the palette, you need to further extend the type. The type IColorSchemeStruct includes semantic palettes and data palettes and is the most functional palette definition. The type definition of IColorSchemeStruct is:

/** Complete palette structure */
type IColorSchemeStruct = {
  /** Data palette */
  dataScheme: Array<DataSchemeItem> | ProgressiveDataScheme<DataSchemeItem>;

  /** Semantic palette */
  palette?: {
    /** User-defined semantic color values */
    [key: string]: ColorSchemeItem;
  };
};

Where:

dataScheme supports passing in the two types of data palettes described in the previous section, corresponding to the data palette where data items are applied as a domain.
And palette is the semantic palette, which can be understood as a color dictionary composed of key-value pairs.

For example, you can expand the previous example and add a semantic palette to rewrite it as:

const colorScheme: IThemeColorScheme = {
  default: {
    // Data palette
    dataScheme: [
      {
        maxDomainLength: 3,
        scheme: ['#1f77b4', '#2ca02c', '#9467bd'] // Palette for 3 data items
      },
      {
        maxDomainLength: 5,
        scheme: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd'] // Palette for 5 data items, inserting other color values between adjacent color values
      },
      {
        isAvailable: domain => domain.length > 5,
        scheme: ['#1f77b4', '#8c564b', '#ff7f0e', '#e377c2', '#2ca02c', '#7f7f7f', '#d62728', '#bcbd22', '#9467bd'] // Complete palette
      }
    ],
    // Semantic palette
    palette: {
      labelFontColor: '#89909D',
      primaryFontColor: '#000000',
      axisGridColor: '#EBEDF2',
      axisDomainColor: '#D9DDE4'
    }
  }
};

Note the semantic palette part of the configuration:

{
  ...
  // Semantic palette
  palette: {
    labelFontColor: '#89909D',
    primaryFontColor: '#000000',
    axisGridColor: '#EBEDF2',
    axisDomainColor: '#D9DDE4'
  }
}

Once the semantic palette is applied in the theme, the user spec can easily fetch colors using key values anywhere. For example, configure the axis style in the spec:

const chartSpec = {
  ...chart spec
  axis: [{
    orient: 'bottom',
    type: 'band',
    domainLine: {
      visible: true,
      style: {
        lineWidth: 1,
        stroke: { type: 'palette', key: 'axisDomainColor' }, // semantic color value
        strokeOpacity: 1
      }
    },
    grid: {
      visible: true,
      style: {
        lineWidth: 1,
        stroke: { type: 'palette', key: 'axisGridColor' }, // semantic color value
        strokeOpacity: 1,
        lineDash: []
      }
    },
    tick: {
      visible: true,
      style: {
        lineWidth: 1,
        stroke: { type: 'palette', key: 'axisDomainColor' }, // semantic color value
        strokeOpacity: 1
      }
    },
    label: {
      visible: true,
      space: 10,
      style: {
        fill: { type: 'palette', key: 'labelFontColor' }, // semantic color value
        fontWeight: 'normal',
        fillOpacity: 1
      }
    }
  }];
}

Configurations that refer to semantic colors via the IColorKey structure appear several times in the examples above. The type definition of IColorKey is:

/** Color value index of semantic color value */
interface IColorKey {
  /** Color type declaration */
  type: 'palette';

  /** Color index */
  key: string;

  /** Brightness coefficient (optional, 0~1) */
  l?: number;

  /** Transparency coefficient (optional, 0~1) */
  a?: number;
}

With the perfect color palette function, when you need to modify the color matching of the entire chart, you only need to adjust the color palette configuration without modifying every detail. Realized the unified style and convenient maintenance.

This tutorial introduces the design and application of VChart chart color palette in detail, covering functions such as data color palette and semantic color palette. By rationally using the color palette function, users can easily customize beautiful and professional charts. In the actual application process, the color matching requirements in different scenarios are ever-changing, and users need to flexibly adjust the configuration according to actual needs. With the powerful color palette function of VChart, it will no longer be difficult to present beautiful data visualization effects.

Color Palette

Concept of Color Palette

Palette Configuration in Theme