Angular Charts: API Reference

Charts

Configuration common to all charts.

chart: {
  data: object[];
  container?: HTMLElement;
  autoSize?: boolean; // default: true
  width?: number;
  height?: number;
  tooltip?: Tooltip;
  padding?: Padding;
  background?: Background;
  title?: Title;
  subtitle?: Subtitle;
  legend?: Legend;
  navigator?: Navigator;
  listeners?: Listeners;
}

tooltip

Global configuration that applies to all tooltips in the chart.

chart: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    tracking?: boolean; // default: true
    class?: string;
    delay?: number; // default: 0
  }
}

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
    item?: Item;
  }
}

item

Configuration for the legend items that consist of a marker and a label.

chart: {
  ...
  legend: {
    ...
    item: {
      paddingX?: number; // default: 16
      paddingY?: number; // default: 8
      marker?: Marker;
      label?: Label;
    }
  }
}

marker

Configuration for the legend markers.

chart: {
  ...
  legend: {
    ...
    item: {
      ...
      marker: {
        padding?: number; // default: 8
        shape?: string;
        size?: number; // default: 15
        strokeWidth?: number; // default: 1
      }
    }
  }
}

label

Configuration for the legend labels.

chart: {
  ...
  legend: {
    ...
    item: {
      ...
      label: {
        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'
        formatter?: Function;
      }
    }
  }
}

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  id: string;
  itemId: any;
  value: string;
}

navigator

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

chart: {
  ...
  navigator: {
    enabled?: boolean; // default: false
    height?: number; // default: 30
    margin?: number; // default: 10
    min?: number; // default: 0
    max?: number; // default: 1
    mask?: Mask;
    minHandle?: MinHandle;
    maxHandle?: MaxHandle;
  }
}

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
    }
  }
}

listeners

A map of event names to event listeners.

chart: {
  ...
  listeners: {
    seriesNodeClick?: Function;
  }
}

seriesNodeClick = (
    params: SeriesNodeClickParams
) => any;

interface SeriesNodeClickParams {
  type: 'seriesNodeClick';
  series: LineSeries | AreaSeries | BarSeries | HistogramSeries | PieSeries | ScatterSeries | TreemapSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Axis

Configuration for axes in cartesian charts.

axis: {
  type?: string;
  position?: string;
  thickness?: number; // default: 0
  nice?: boolean; // default: true
  base?: number; // default: 10
  min?: number;
  max?: number;
  title?: Title;
  line?: Line;
  tick?: Tick;
  label?: Label;
  gridStyle?: GridStyle;
}

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;
  }
}

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  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]
  }
}

Series: Area

Configuration for area series.

area: {
  xKey: string;
  xName?: string;
  yKeys: string[];
  yNames?: string[];
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  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
  marker?: Marker;
  label?: Label;
  highlightStyle?: HighlightStyle;
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  shadow?: Shadow;
  listeners?: Listeners;
}

tooltip

Series-specific tooltip configuration.

area: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

marker

Configuration for the markers used in the series.

area: {
  ...
  marker: {
    enabled?: boolean; // default: false
    shape?: string | Marker; // default: 'circle'
    size?: number; // default: 8
    maxSize?: number; // default: 30
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => Formatter;

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

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

label

Configuration for the labels shown on top of data points.

area: {
  ...
  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'
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  value: any;
}

highlightStyle

Configuration for area series markers and series line highlighting when an area marker / data point or a legend item is hovered over.

area: {
  ...
  highlightStyle: {
    item?: Item;
    series?: Series;
  }
}

item

Highlight style used for an individual markers when tapped or hovered over.

area: {
  ...
  highlightStyle: {
    ...
    item: {
      fill?: string; // default: 'yellow'
      stroke?: string;
      strokeWidth?: number;
    }
  }
}

series

Highlight style used for whole series when one of its markers is tapped or hovered over.

area: {
  ...
  highlightStyle: {
    ...
    series: {
      strokeWidth?: number;
      dimOpacity?: number;
    }
  }
}

shadow

Configuration for the shadow used behind the 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
  }
}

listeners

A map of event names to event listeners.

area: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}

nodeClick = (
    params: NodeClickParams
) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: AreaSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Series: Bar/Column

Configuration for bar/column series.

bar: {
  xKey: string;
  xName?: string;
  yKeys: string[];
  yNames?: string[];
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  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
  highlightStyle?: HighlightStyle;
  shadow?: Shadow;
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  label?: Label;
  formatter?: Function;
  listeners?: Listeners;
}

formatter = (
    params: FormatterParams
) => Formatter;

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

interface Formatter {
  fill: string;
  stroke: string;
  strokeWidth: number;
}

tooltip

Series-specific tooltip configuration.

bar: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

highlightStyle

Configuration for series item and whole series highlighting when bar/column segments or legend items are hovered over.

bar: {
  ...
  highlightStyle: {
    item?: Item;
    series?: Series;
  }
}

item

Highlight style used for an individual bar / bar segment when tapped or hovered over.

bar: {
  ...
  highlightStyle: {
    ...
    item: {
      fill?: string; // default: 'yellow'
      stroke?: string;
      strokeWidth?: number;
    }
  }
}

series

Highlight style used for all bars (or bar segments belonging to the same stack level, in case of stacked bars) when individual bar / bar segment is tapped or hovered over.

bar: {
  ...
  highlightStyle: {
    ...
    series: {
      strokeWidth?: number;
      dimOpacity?: number;
    }
  }
}

shadow

Configuration for the shadow used behind the 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.

bar: {
  ...
  label: {
    enabled?: boolean; // default: true
    placement?: 'inside' | 'outside'; // default: 'inside'
    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'
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  value: number;
}

listeners

A map of event names to event listeners.

bar: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}

nodeClick = (
    params: NodeClickParams
) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: BarSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Series: Histogram

Configuration for histogram series.

histogram: {
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  xKey: string;
  xName?: string;
  yKey?: string;
  yName?: string;
  binCount?: number; // default: 10
  bins?: number[][];
  aggregation?: string; // default: 'sum'
  areaPlot?: boolean; // default: 'false'
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  highlightStyle?: HighlightStyle;
  fill?: string; // default: '#f3622d'
  fillOpacity?: number; // default: 1
  stroke?: string; // default: '#aa4520'
  strokeOpacity?: number; // default: 1
  strokeWidth?: number; // default: 1
  listeners?: Listeners;
}

tooltip

Series-specific tooltip configuration.

histogram: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

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

highlightStyle

Configuration for series item and whole series highlighting when columns or legend items are hovered over.

histogram: {
  ...
  highlightStyle: {
    item?: Item;
    series?: Series;
  }
}

item

Highlight style used for an individual column when tapped or hovered over.

histogram: {
  ...
  highlightStyle: {
    ...
    item: {
      fill?: string; // default: 'yellow'
      stroke?: string;
      strokeWidth?: number;
    }
  }
}

series

Highlight style used for the whole series when a single column is tapped or hovered over.

histogram: {
  ...
  highlightStyle: {
    ...
    series: {
      strokeWidth?: number;
      dimOpacity?: number;
    }
  }
}

listeners

A map of event names to event listeners.

histogram: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}

nodeClick = (
    params: NodeClickParams
) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: HistogramSeries;
  datum: any;
  xKey: string;
}

Series: Line

Configuration for line series.

line: {
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  title?: string;
  stroke?: string; // default: '#aa4520'
  strokeOpacity?: number; // default: 1
  strokeWidth?: number; // default: 1
  marker?: Marker;
  label?: Label;
  highlightStyle?: HighlightStyle;
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  listeners?: Listeners;
}

tooltip

Series-specific tooltip configuration.

line: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

marker

Configuration for the markers used in the series.

line: {
  ...
  marker: {
    enabled?: boolean; // default: true
    shape?: string | Marker; // default: 'circle'
    size?: number; // default: 8
    maxSize?: number; // default: 30
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => Formatter;

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

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

label

Configuration for the labels shown on top of data points.

line: {
  ...
  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'
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  value: any;
}

highlightStyle

Configuration for line series markers and series line highlighting when a line marker / data point or a legend item is hovered over.

line: {
  ...
  highlightStyle: {
    item?: Item;
    series?: Series;
  }
}

item

Highlight style used for an individual markers when tapped or hovered over.

line: {
  ...
  highlightStyle: {
    ...
    item: {
      fill?: string; // default: 'yellow'
      stroke?: string;
      strokeWidth?: number;
    }
  }
}

series

Highlight style used for whole series when one of its markers is tapped or hovered over.

line: {
  ...
  highlightStyle: {
    ...
    series: {
      strokeWidth?: number;
      dimOpacity?: number;
    }
  }
}

listeners

A map of event names to event listeners.

line: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}

nodeClick = (
    params: NodeClickParams
) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: LineSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Series: Pie/Doughnut

Configuration for pie/doughnut series.

pie: {
  angleKey: string;
  angleName?: string;
  labelKey: string;
  labelName?: string;
  radiusKey?: string;
  radiusName?: string;
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  lineDash?: number[]; // default: []
  lineDashOffset?: number; // default: 0
  rotation?: number; // default: 0
  innerRadiusOffset?: number; // default: 0
  outerRadiusOffset?: number; // default: 0
  title?: Title;
  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
  highlightStyle?: HighlightStyle;
  label?: Label;
  callout?: Callout;
  shadow?: Shadow;
  listeners?: Listeners;
}

tooltip

Series-specific tooltip configuration.

pie: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

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

title

Configuration for the series title.

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 pie series sector highlighting when a pie sector or a corresponding legend item is hovered over.

pie: {
  ...
  highlightStyle: {
    item?: Item;
    series?: Series;
  }
}

item

Highlight style used for an individual sectors when tapped or hovered over.

pie: {
  ...
  highlightStyle: {
    ...
    item: {
      fill?: string; // default: 'yellow'
      stroke?: string;
      strokeWidth?: number;
    }
  }
}

series

Highlight style used for whole series when one of its sectors is tapped or hovered over.

pie: {
  ...
  highlightStyle: {
    ...
    series: {
      strokeWidth?: number;
      dimOpacity?: number;
    }
  }
}

label

Configuration for the labels used for the segments.

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
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  value: string;
}

callout

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

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.

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
  }
}

listeners

A map of event names to event listeners.

pie: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}

nodeClick = (
    params: NodeClickParams
) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: PieSeries;
  datum: any;
  angleKey: string;
  radiusKey?: string;
}

Series: Scatter/Bubble

Configuration for scatter/bubble series.

scatter: {
  xKey: string;
  xName?: string;
  yKey: string;
  yName?: string;
  sizeKey?: string;
  sizeName?: string;
  labelKey?: string;
  labelName?: string;
  data: object[];
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  tooltip?: Tooltip;
  title?: string;
  marker?: Marker;
  label?: Label;
  highlightStyle?: HighlightStyle;
  listeners?: Listeners;
}

tooltip

Series-specific tooltip configuration.

scatter: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

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

marker

Configuration for the markers used in the series.

scatter: {
  ...
  marker: {
    enabled?: boolean; // default: true
    shape?: string | Marker; // default: 'circle'
    size?: number; // default: 8
    maxSize?: number; // default: 30
    fill?: string; // default: '#f3622d'
    fillOpacity?: number; // default: 1
    stroke?: string; // default: '#aa4520'
    strokeWidth?: number; // default: 1
    strokeOpacity?: number; // default: 1
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => Formatter;

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

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

label

Configuration for the labels shown on top of data points.

scatter: {
  ...
  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'
  }
}

highlightStyle

Configuration for scatter series marker highlighting when a marker or a legend item is hovered over.

scatter: {
  ...
  highlightStyle: {
    item?: Item;
    series?: Series;
  }
}

item

Highlight style used for an individual markers when tapped or hovered over.

scatter: {
  ...
  highlightStyle: {
    ...
    item: {
      fill?: string; // default: 'yellow'
      stroke?: string;
      strokeWidth?: number;
    }
  }
}

series

Highlight style used for whole series when one of its markers is tapped or hovered over.

scatter: {
  ...
  highlightStyle: {
    ...
    series: {
      strokeWidth?: number;
      dimOpacity?: number;
    }
  }
}

listeners

A map of event names to event listeners.

scatter: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}

nodeClick = (
    params: NodeClickParams
) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: ScatterSeries;
  datum: any;
  xKey: string;
  yKey: string;
  sizeKey?: string;
}

Series: Treemap

Configuration for the treemap series.

treemap: {
  title?: Title;
  subtitle?: Subtitle;
  labels?: Labels;
  labelKey?: string; // default: 'label'
  sizeKey?: string; // default: 'size'
  colorKey?: string; // default: 'color'
  colorDomain?: number[]; // default: '[-5, 5]'
  colorRange?: string[]; // default: '['#cb4b3f', '#6acb64']'
  colorParents?: boolean; // default: false
  tooltip?: Tooltip;
  nodePadding?: number; // default: 2
  gradient?: boolean; // default: true
  cursor?: string; // default: 'default'
  listeners?: Listeners;
}

title

The label configuration for the top-level parent tiles.

treemap: {
  ...
  title: {
    color?: string; // default: 'white'
    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: 12
    fontFamily?: string; // default: 'Verdana, sans-serif'
    padding?: number; // default: 15
  }
}

subtitle

The label configuration for the children of the top-level parent tiles.

treemap: {
  ...
  subtitle: {
    color?: string; // default: 'white'
    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: 9
    fontFamily?: string; // default: 'Verdana, sans-serif'
    padding?: number; // default: 13
  }
}

labels

Configuration for the tile labels.

treemap: {
  ...
  labels: {
    large?: Large;
    medium?: Medium;
    small?: Small;
    color?: Color;
  }
}

large

The label configuration for the large leaf tiles.

treemap: {
  ...
  labels: {
    ...
    large: {
      color?: string; // default: 'white'
      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'
    }
  }
}

medium

The label configuration for the medium-sized leaf tiles.

treemap: {
  ...
  labels: {
    ...
    medium: {
      color?: string; // default: 'white'
      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'
    }
  }
}

small

The label configuration for the small leaf tiles.

treemap: {
  ...
  labels: {
    ...
    small: {
      color?: string; // default: 'white'
      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: 10
      fontFamily?: string; // default: 'Verdana, sans-serif'
    }
  }
}

color

The configuration for the labels showing the value of the 'colorKey'.

treemap: {
  ...
  labels: {
    ...
    color: {
      color?: string; // default: 'white'
      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: 12
      fontFamily?: string; // default: 'Verdana, sans-serif'
    }
  }
}

tooltip

Series-specific tooltip configuration.

treemap: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  labelKey: string;
  sizeKey?: string;
  colorKey?: string;
}