Skip to content
@statistikzh/charts

Colors

Use this guide to choose the right color scheme for your chart. You can use a predefined scheme or provide your own range of colors.

Start with the default scheme

Section titled “Start with the default scheme”

The category (6 colors) scheme is automatically applied to every chart with a groupByKey. If this is all you need, no further options are necessary.

Like every other predefined scheme, the colors are assigned based on the order of the groups. The first group is assigned to the first color in the scheme and so on.

The same scheme exists with an additional shade for each color, called categoryPairs.

To change the scheme, set color.scheme to the name of a predefined scheme:

const options = {
  color: {
    scheme: "categoryPairs",
  },
};

Semantic schemes

Section titled “Semantic schemes”

Color schemes where a color conveys a specific meaning are referred to as semantic schemes. Currently there are two types of semantic schemes defined: “Gender” and “Political parties”.

These schemes are, like every other scheme, set to a predefined order of colors. To correctly assign these colors to the groups, you must specify color.domain.

Look up the order of the colors on the color options page.

const options = {
  color: {
    scheme: "gender",
    domain: ["weiblich", "männlich"], // the labels your data uses for the groups
  },
};

Gender

Section titled “Gender”

Scheme: gender or genderPairs

Similar to the category scheme, the gender scheme also has a variant with an additional shade for each color, called genderPairs.

const options = {
  color: {
    scheme: "genderPairs",
    domain: [
      "Weiblich / Schweiz",
      "Weiblich / Ausland",
      "Männlich / Schweiz",
      "Männlich / Ausland",
    ],
  },
};

Political parties

Section titled “Political parties”

Scheme: politicalParties

The domain must list the party labels exactly as they appear in your data, in the position of the party whose color they should receive. The example below uses GP, FGA/AL/PDA, and Übrige because that is how this dataset labels the parties that the scheme calls GPS, AL, and andere. Lega and CSP are absent from the data but stay in the list, so that every party after them keeps its own color.

Custom color ranges

Section titled “Custom color ranges”

If no predefined scheme fits your needs, you can provide your own range of colors. Define the colors in color.range and the order of the groups in color.domain.

const options = {
  groupByKey: "name",
  color: {
    range: ["#00407C", "#00797B", "#D93C1A"],
    domain: ["Stadt Zürich", "Bülach", "Hedingen"],
  },
};