JS Series & Point Colors Chart

Chart Tutorials  

Series & Point Colors

Using colors with series and data points.

Series and data point styling can be fully controlled through a set of properties and color adjustment settings.

The color adjustment system allows specifying a default colorizing scheme that is not color dependent. A certain look can be defined for all series and points through a single set of default settings. The actual colors will be assigned by a chart palette or directly on the series.

🔗Palettes

The chart.palette property can be set with an array of colors or a palette name. Please see this list of available predefined palettes.

Specific colors of pre-defined palette can be retrieved using the JSC.getPalette() function.

JSC.getPalette("default") //-> ["#4285F4", "#fE4C14", "#DBCB18", "#15AC20",...

Map Palette Designer Sample Provides a utility to generate code or colors where the variation between colors can be controlled
SmartPalette Tutorial SmartPalette tutorial.

🔗Color by Point

Series points can iterate a palette applying different colors to each point when the series.palette property is set with an array of colors, or palette name. When a series has a palette defined, each point is automatically assigned a legend entry.
var chartOptions = {
  series: [
    {
      name: "Series 1",
      palette: "autumn",
      points: [
        /*...*/
      ]
    }
  ]
};

🔗Series

Not all chart types such as bar charts have visual elements to style, however, area and line charts do. The series.line and series.shape config objects provide styling options for these visuals when applicable. Line caps can also be specified for series lines.

var chartOptions = {
  series: [
    {
      type: "area",
      line: { width: 1, caps_end_type: "arrow" },
      shape_fill: "white",
      points: [
        /*...*/
      ]
    }
  ]
};

🔗Points

Points have color, fill, and outline properties. Setting the color property applies the color to fill and slightly darker version of it to the outline color. Setting fill and outline.color separately provides full control over these colors and avoids any automated styling.

Point label styles such as fontFamily, and fontSize, can be set through the the point.label.style property.

🔗Point Markers

Point marker styling can be specified similarity through the pointMarker color, fill, and outline properties. Not all series types have points with markers by default, but they can be enabled for all series types.

🔗Hatch Styling

Hatch patterns can be applied to data points. The hatchStyle enum defines all available hatch patterns. Similar to color palettes, the chart.hatchPalette and series.hatchPalette property can be set with an array of hatch pattern names or true to enable the default palette. Hatch patterns can also be applied to individual data points through the point.hatch.style property.

🔗Color Adjustment Settings

A series is assigned a color usually from a chart palette or set directly through the series.color property. This become the series base color. The styling flows through subsequent styling properties resulting in the same or adjusted colors depending on the property. These adjustments can be specified by using special naming in the color properties.

For example, the following snippet makes the point outline color darker than the base color.

var chartOptions = { defaultPoint: { outline: { color: "darken" } } };

Similarly, color adjustment for any series and point related color properties can be disabled by specifying 'currentColor'.

var chartOptions = { defaultPoint: { outline: { color: "currentColor" } } };

🔗Color adjustment options

Figure 1.
Illustration of color adjustment optinos.
  • currentColor
    The base color of the series or point.
  • lighten
    A slightly lighter version of the color.
  • lightenMore
    A lighter version of the color.
  • darken
    A slightly darker version of the color.
  • darkenMore
    A darker version of the color.
  • desaturate
    Desaturates the color completely.
  • complement
    A color with a complementary hue.
  • contrast
    A color that contrasts with the current color.

🔗States

Point styling of hover and select states can also be defined using the point.states hover/select properties.

See the States Tutorial for more information.