Themes API Reference

Theme Configuration

This object is used to define the configuration for a custom chart theme.

theme: {
  baseTheme: 'default' | 'dark' | 'material' | 'material-dark' | 'pastel' | 'pastel-dark' | 'solar' | 'solar-dark' | 'vivid' | 'vivid-dark'; // default: 'default'
  palette: IPalette;
  overrides: IOverrides;
}

palette

The palette to use. If specified, this replaces the palette from the base theme.

theme: {
  ...
  palette: {
    fills: string[];
    strokes: string[];
  }
}

overrides

Configuration from this object is merged over the defaults specified in the base theme.

theme: {
  ...
  overrides: {
    common: IChart;
    cartesian: IChart;
    polar: IChart;
    bar: IChart;
    histogram: IChart;
    line: IChart;
    scatter: IChart;
    area: IChart;
    pie: IChart;
  }
}

Chart Configuration

This is the common configuration shared by all types of chart, as used in the overrides object.

chart: {
  autoSize: boolean; // default: true
  width: number;
  height: number;
  padding: IPadding;
  background: IBackground;
  title: ITitle;
  subtitle: ISubtitle;
  legend: ILegend;
  navigator: INavigator;
  axes: IAxes;
  series: ISeries;
}

padding

Configuration for the padding shown around the chart.

chart: {
  ...
  padding: {
    top: number; // default: 20
    right: number; // default: 20
    bottom: number; // default: 20
    left: number; // default: 20
  }
}

background

Configuration for the background shown behind the chart.

chart: {
  ...
  background: {
    fill: string; // default: '#FFFFFF'
    visible: boolean; // default: true
  }
}

title

Configuration for the title shown at the top of the chart.

chart: {
  ...
  title: {
    enabled: boolean; // default: true
    text: string; // default: 'Title'
    color: string; // default: '#000000'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
    fontSize: number; // default: 18
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

subtitle

Configuration for the subtitle shown beneath the chart title. Note: a subtitle will only be shown if a title is also present.

chart: {
  ...
  subtitle: {
    enabled: boolean; // default: true
    text: string; // default: 'Subtitle'
    color: string; // default: '#000000'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize: number; // default: 14
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

legend

Configuration for the chart legend.

chart: {
  ...
  legend: {
    enabled: boolean; // default: true
    position: 'top' | 'right' | 'bottom' | 'left'; // default: 'right'
    spacing: number; // default: 20
    layoutHorizontalSpacing: number; // default: 16
    layoutVerticalSpacing: number; // default: 8
    itemSpacing: number; // default: 8
    markerShape: string;
    markerSize: number; // default: 15
    strokeWidth: number; // default: 1
    color: string; // default: 'black'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize: number; // default: 12
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

navigator

Configuration for the chart navigator. This config is only supported by cartesian charts.

chart: {
  ...
  navigator: {
    enabled: boolean; // default: false
    height: number; // default: 30
    min: number; // default: 0
    max: number; // default: 1
    mask: IMask;
    minHandle: IMinHandle;
    maxHandle: IMaxHandle;
  }
}

mask

Configuration for the navigator's visible range mask.

chart: {
  ...
  navigator: {
    ...
    mask: {
      fill: string; // default: '#999999'
      stroke: string; // default: '#999999'
      strokeWidth: number; // default: 1
      fillOpacity: number; // default: 0.2
    }
  }
}

minHandle

Configuration for the navigator's left handle.

chart: {
  ...
  navigator: {
    ...
    minHandle: {
      fill: string; // default: '#f2f2f2'
      stroke: string; // default: '#999999'
      strokeWidth: number; // default: 1
      width: number; // default: 8
      height: number; // default: 16
      gripLineLength: number; // default: 8
      gripLineGap: number; // default: 2
    }
  }
}

maxHandle

Configuration for the navigator's right handle.

chart: {
  ...
  navigator: {
    ...
    maxHandle: {
      fill: string; // default: '#f2f2f2'
      stroke: string; // default: '#999999'
      strokeWidth: number; // default: 1
      width: number; // default: 8
      height: number; // default: 16
      gripLineLength: number; // default: 8
      gripLineGap: number; // default: 2
    }
  }
}

axes

chart: {
  ...
  axes: {
    number: INumberAxis;
    category: ICategoryAxis;
    groupedCategory: IGroupedCategoryAxis;
    time: ITimeCategoryAxis;
  }
}

number

This extends the common axis configuration with options specific to number axes.

chart: {
  ...
  axes: {
    ...
    number: {
      nice: boolean; // default: true
      min: number;
      max: number;
    }
  }
}

category

This extends the common axis configuration with options specific to category axes.

chart: {
  ...
  axes: {
    ...
    category: {
      paddingInner: number;
      paddingOuter: number;
    }
  }
}

time

This extends the common axis configuration with options specific to time axes.

chart: {
  ...
  axes: {
    ...
    time: {
      nice: boolean; // default: true
    }
  }
}

series

This object contains configuration for the different series that might be rendered into the chart.

For cartesian charts, the following series are supported: 'bar', 'column', 'histogram', 'line', 'scatter', 'area'
For polar charts, the following series are supported: 'pie'

If the series property is being set inside configuration for a specific type of chart (e.g. line), instead of supplying the whole series object as specified here, for convenience you can put the relevant series configuration object directly into the series property, since all series for a specific chart will be of the same type (e.g. line).

chart: {
  ...
  series: {
    bar: IBarColumnSeries;
    column: IBarColumnSeries;
    histogram: IHistogramSeries;
    line: ILineSeries;
    area: IAreaSeries;
    scatter: IScatterSeries;
    pie: IPieSeries;
  }
}

bar

Configuration for bar series.

chart: {
  ...
  series: {
    ...
    bar: {
      tooltipRenderer: Function;
      grouped: boolean; // default: false
      normalizedTo: number;
      fills: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
      fillOpacity: number; // default: 1
      strokes: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
      strokeOpacity: number; // default: 1
      strokeWidth: number; // default: 1
      lineDash: number[]; // default: []
      lineDashOffset: number; // default: 0
      highlightStyle: IHighlightStyle;
      shadow: IShadow;
      label: ILabel;
    }
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
}

highlightStyle

Configuration for the highlighting used when the bars are hovered over.

chart: {
  ...
  series: {
    ...
    bar: {
      ...
      highlightStyle: {
        fill: string; // default: 'yellow'
        stroke: string;
      }
    }
  }
}

shadow

Configuration for the shadow used behind the chart series.

chart: {
  ...
  series: {
    ...
    bar: {
      ...
      shadow: {
        enabled: boolean; // default: true
        color: string; // default: 'rgba(0, 0, 0, 0.5)'
        xOffset: number; // default: 0
        yOffset: number; // default: 0
        blur: number; // default: 5
      }
    }
  }
}

label

Configuration for the labels shown on bars.

chart: {
  ...
  series: {
    ...
    bar: {
      ...
      label: {
        enabled: boolean; // default: true
        color: string; // default: 'rgba(70, 70, 70, 1)'
        fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
        fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
        fontSize: number; // default: 12
        fontFamily: string; // default: 'Verdana, sans-serif'
      }
    }
  }
}

histogram

Configuration for histogram series.

chart: {
  ...
  series: {
    ...
    histogram: {
      tooltipRenderer: Function;
      binCount: number;
      bins: number[][];
      aggregation: string; // default: 'sum'
      areaPlot: boolean; // default: 'false'
      lineDash: number[]; // default: []
      lineDashOffset: number; // default: 0
      highlightStyle: IHighlightStyle;
      fill: string; // default: '#f3622d'
      fillOpacity: number; // default: 1
      stroke: string; // default: '#aa4520'
      strokeOpacity: number; // default: 1
      strokeWidth: number; // default: 1
    }
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
  sizeKey?: string;
  sizeName?: string;
  labelKey?: string;
  labelName?: string;
}

highlightStyle

Configuration for the highlighting used when the bars are hovered over.

chart: {
  ...
  series: {
    ...
    histogram: {
      ...
      highlightStyle: {
        fill: string; // default: 'yellow'
        stroke: string;
      }
    }
  }
}

line

Configuration for line series.

chart: {
  ...
  series: {
    ...
    line: {
      tooltipRenderer: Function;
      title: string;
      stroke: string; // default: '#aa4520'
      strokeOpacity: number; // default: 1
      strokeWidth: number; // default: 1
      marker: IMarker;
      lineDash: number[]; // default: []
      lineDashOffset: number; // default: 0
      highlightStyle: IHighlightStyle;
    }
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
}

marker

Configuration for the markers used in the series.

chart: {
  ...
  series: {
    ...
    line: {
      ...
      marker: {
        enabled: boolean; // default: true
        shape: string | Marker; // default: 'circle'
        size: number; // default: 8
        minSize: number; // default: 12
        fill: string;
        stroke: string;
        strokeWidth: number;
        formatter: Function;
      }
    }
  }
}

function (params: IParams): IReturn;

interface IParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface IReturn {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

Configuration for the highlighting used when the markers are hovered over.

chart: {
  ...
  series: {
    ...
    line: {
      ...
      highlightStyle: {
        fill: string; // default: 'yellow'
        stroke: string;
      }
    }
  }
}

area

Configuration for area series.

chart: {
  ...
  series: {
    ...
    area: {
      tooltipRenderer: Function;
      normalizedTo: number;
      fills: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
      fillOpacity: number; // default: 1
      strokes: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
      strokeOpacity: number; // default: 1
      strokeWidth: number; // default: 1
      lineDash: number[]; // default: []
      lineDashOffset: number; // default: 0
      marker: IMarker;
      highlightStyle: IHighlightStyle;
      shadow: IShadow;
    }
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
}

marker

Configuration for the markers used in the series.

chart: {
  ...
  series: {
    ...
    area: {
      ...
      marker: {
        enabled: boolean; // default: false
        shape: string | Marker; // default: 'circle'
        size: number; // default: 8
        minSize: number; // default: 12
        fill: string;
        stroke: string;
        strokeWidth: number;
        formatter: Function;
      }
    }
  }
}

function (params: IParams): IReturn;

interface IParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface IReturn {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

Configuration for the highlighting used when the markers are hovered over.

chart: {
  ...
  series: {
    ...
    area: {
      ...
      highlightStyle: {
        fill: string; // default: 'yellow'
        stroke: string;
      }
    }
  }
}

shadow

Configuration for the shadow used behind the chart series.

chart: {
  ...
  series: {
    ...
    area: {
      ...
      shadow: {
        enabled: boolean; // default: true
        color: string; // default: 'rgba(0, 0, 0, 0.5)'
        xOffset: number; // default: 0
        yOffset: number; // default: 0
        blur: number; // default: 5
      }
    }
  }
}

scatter

Configuration for scatter/bubble series.

chart: {
  ...
  series: {
    ...
    scatter: {
      tooltipRenderer: Function;
      title: string;
      fill: string; // default: '#f3622d'
      fillOpacity: number; // default: 1
      stroke: string; // default: '#aa4520'
      strokeOpacity: number; // default: 1
      strokeWidth: number; // default: 1
      marker: IMarker;
      highlightStyle: IHighlightStyle;
    }
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
  sizeKey?: string;
  sizeName?: string;
  labelKey?: string;
  labelName?: string;
}

marker

Configuration for the markers used in the series.

chart: {
  ...
  series: {
    ...
    scatter: {
      ...
      marker: {
        enabled: boolean; // default: true
        shape: string | Marker; // default: 'circle'
        size: number; // default: 8
        minSize: number; // default: 12
        fill: string;
        stroke: string;
        strokeWidth: number;
        formatter: Function;
      }
    }
  }
}

function (params: IParams): IReturn;

interface IParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface IReturn {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

highlightStyle

Configuration for the highlighting used when the markers are hovered over.

chart: {
  ...
  series: {
    ...
    scatter: {
      ...
      highlightStyle: {
        fill: string; // default: 'yellow'
        stroke: string;
      }
    }
  }
}

pie

Configuration for pie/doughnut series.

chart: {
  ...
  series: {
    ...
    pie: {
      tooltipRenderer: Function;
      rotation: number; // default: 0
      innerRadiusOffset: number; // default: 0
      outerRadiusOffset: number; // default: 0
      title: ITitle;
      fills: string[]; // default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
      fillOpacity: number; // default: 1
      strokes: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
      strokeOpacity: number; // default: 1
      strokeWidth: number; // default: 1
      lineDash: number[]; // default: []
      lineDashOffset: number; // default: 0
      highlightStyle: IHighlightStyle;
      label: ILabel;
      callout: ICallout;
      shadow: IShadow;
    }
  }
}

function (params: IParams): string;

interface IParams {
  datum: any;
  title?: string;
  color?: string;
  angleKey: string;
  angleName?: string;
  radiusKey?: string;
  radiusName?: string;
  labelKey?: string;
  labelName?: string;
}

title

Configuration for the series title.

chart: {
  ...
  series: {
    ...
    pie: {
      ...
      title: {
        enabled: boolean; // default: true
        text: string;
        color: string; // default: '#000000'
        fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
        fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
        fontSize: number; // default: 10
        fontFamily: string; // default: 'Verdana, sans-serif'
      }
    }
  }
}

highlightStyle

Configuration for the highlighting used when the segments are hovered over.

chart: {
  ...
  series: {
    ...
    pie: {
      ...
      highlightStyle: {
        fill: string; // default: 'yellow'
        stroke: string;
      }
    }
  }
}

label

Configuration for the labels used for the segments.

chart: {
  ...
  series: {
    ...
    pie: {
      ...
      label: {
        enabled: boolean; // default: true
        color: string; // default: '#000000'
        fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
        fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
        fontSize: number; // default: 12
        fontFamily: string; // default: 'Verdana, sans-serif'
        offset: number; // default: 3
        minAngle: number; // default: 20
      }
    }
  }
}

callout

Configuration for the callouts used with the labels for the segments.

chart: {
  ...
  series: {
    ...
    pie: {
      ...
      callout: {
        colors: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
        strokeWidth: number; // default: 1
        length: number; // default: 10
      }
    }
  }
}

shadow

Configuration for the shadow used behind the chart series.

chart: {
  ...
  series: {
    ...
    pie: {
      ...
      shadow: {
        enabled: boolean; // default: true
        color: string; // default: 'rgba(0, 0, 0, 0.5)'
        xOffset: number; // default: 0
        yOffset: number; // default: 0
        blur: number; // default: 5
      }
    }
  }
}

Common Axis Configuration

This is the configuration shared by all types of axis.

axis: {
  title: ITitle;
  line: ILine;
  tick: ITick;
  label: ILabel;
  gridStyle: IGridStyle;
}

title

Configuration for the title shown next to the axis.

axis: {
  ...
  title: {
    enabled: boolean; // default: true
    text: string; // default: 'Axis Title'
    color: string; // default: '#000000'
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'bold'
    fontSize: number; // default: 14
    fontFamily: string; // default: 'Verdana, sans-serif'
  }
}

line

Configuration for the axis line.

axis: {
  ...
  line: {
    width: number; // default: 1
    color: string; // default: 'rgba(195, 195, 195, 1)'
  }
}

tick

Configuration for the axis ticks.

axis: {
  ...
  tick: {
    width: number; // default: 1
    size: number; // default: 6
    color: string; // default: 'rgba(195, 195, 195, 1)'
    count: number; // default: 10
  }
}

label

Configuration for the axis labels, shown next to the ticks.

axis: {
  ...
  label: {
    fontStyle: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize: number; // default: 12
    fontFamily: string; // default: 'Verdana, sans-serif'
    color: string; // default: '#000000'
    padding: number; // default: 5
    rotation: number; // default: 0
    format: string;
    formatter: Function;
  }
}

function (params: IParams): string;

interface IParams {
  value: any;
  index: number;
  fractionDigits: number;
  formatter: (x: any) => string;
}

gridStyle

Configuration of the lines used to form the grid in the chart area.

axis: {
  ...
  gridStyle: {
    stroke: string; // default: 'rgba(195, 195, 195, 1)'
    lineDash: number[]; // default: [4, 2]
  }
}

Common Series Configuration

This is the common configuration shared by all types of series.

series: {
  visible: boolean; // default: true
  showInLegend: boolean; // default: true
  tooltipEnabled: boolean; // default: true
  listeners: Object;
}