Skip to content

Color Palette Config

Configure the color palettes to use for collections of series.

Every property is optional and falls back to its default. Property anchors are stable: link to any entry as #colorPalette.propertyName, and to a member of a nested property as #colorPalette.propertyName.memberName.

Properties

errorBar

The color palettes to use for series error bars that are colored by series or category index.

  • Default: { normal: { … }, focused: { … }, defocused: { … } }
  • Validation: should be an object with any of the properties { normal: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }, focused: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }, defocused: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color } }

errorBar.defocused

The palette to use for the defocused error bars.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
errorBar.defocused.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
errorBar.defocused.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

errorBar.focused

The palette to use for the focused error bars.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
errorBar.focused.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
errorBar.focused.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

errorBar.normal

The palette to use while nothing has focus.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
errorBar.normal.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
errorBar.normal.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

label

The color palettes to use for series labels that are colored by series or category index.

  • Default: { normal: { … }, focused: { … }, defocused: { … } }
  • Validation: should be an object with any of the properties { normal: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }, focused: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }, defocused: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color } }

label.defocused

The palette to use for the defocused labels.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
label.defocused.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
label.defocused.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

label.focused

The palette to use for the focused labels.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
label.focused.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
label.focused.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

label.normal

The palette to use while nothing has focus.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
label.normal.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
label.normal.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

marker

The color palettes to use for series markers that are colored by series or category index.

  • Default: { normal: { … }, focused: { … }, defocused: { … } }
  • Validation: should be an object with any of the properties { normal: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }, focused: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }, defocused: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color } }

marker.defocused

The palette to use for the defocused markers.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
marker.defocused.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
marker.defocused.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

marker.focused

The palette to use for the focused markers.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
marker.focused.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
marker.focused.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

marker.normal

The palette to use while nothing has focus.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
marker.normal.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
marker.normal.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

series

The color palettes to use for series shapes that are colored by series or category index.

The fallback coloring for series that do not set explicit colors: each series takes the palette entry for its series index (or its category index, for series configured to color by category index). The focused/defocused variants apply while another element has focus.

  • Default: { normal: { … }, focused: { … }, defocused: { … } }
  • Validation: should be an object with any of the properties { normal: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }, focused: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }, defocused: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color } }

series.defocused

The palette to use for the defocused shapes.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
series.defocused.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
series.defocused.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

series.focused

The palette to use for the focused shapes.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
series.focused.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
series.focused.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

series.normal

The palette to use while nothing has focus.

  • Default: { strokeColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"], fillColors: ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf", "#aec7e8", "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#c49c94", "#f7b6d2", "#c7c7c7", "#dbdb8d", "#9edae5"] }
  • Validation: should be an object with any of the properties { strokeColors: should be a non-empty array with elements that should be a valid color, fillColors: should be a non-empty array with elements that should be a valid color }
series.normal.fillColors

The colors to use for fills, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color
series.normal.strokeColors

The colors to use for strokes, taken by series or category index and wrapping around when there are more series than colors.

  • Default:
  • Validation: should be a non-empty array with elements that should be a valid color

Released under the BSD-3-Clause License.