Vue Charts: 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?: Palette;
  overrides?: Overrides;
}

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;
    hierarchy?: 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;
  tooltip?: Tooltip;
  padding?: Padding;
  background?: Background;
  title?: Title;
  subtitle?: Subtitle;
  legend?: Legend;
  navigator?: Navigator;
  axes?: Axes;
  series?: Series;
}

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;
  label: { text: 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
    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
    }
  }
}

axes

chart: {
  ...
  axes: {
    number?: INumberAxis;
    log?: ILogAxis;
    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;
    }
  }
}

log

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

chart: {
  ...
  axes: {
    ...
    log: {
      nice?: boolean; // default: true
      min?: number;
      max?: number;
      base?: number; // default: 10
    }
  }
}

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: {
      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
      lineDash?: number[]; // default: []
      lineDashOffset?: number; // default: 0
      highlightStyle?: HighlightStyle;
      shadow?: Shadow;
      label?: Label;
    }
  }
}

tooltip

Series-specific tooltip configuration.

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

histogram

Configuration for histogram series.

chart: {
  ...
  series: {
    ...
    histogram: {
      tooltip?: Tooltip;
      binCount?: number;
      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
    }
  }
}

tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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 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: {
      tooltip?: Tooltip;
      title?: string;
      stroke?: string; // default: '#aa4520'
      strokeOpacity?: number; // default: 1
      strokeWidth?: number; // default: 1
      marker?: Marker;
      label?: Label;
      lineDash?: number[]; // default: []
      lineDashOffset?: number; // default: 0
      highlightStyle?: HighlightStyle;
    }
  }
}

tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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.

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

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.

chart: {
  ...
  series: {
    ...
    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 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: {
      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
      lineDash?: number[]; // default: []
      lineDashOffset?: number; // default: 0
      marker?: Marker;
      label?: Label;
      highlightStyle?: HighlightStyle;
      shadow?: Shadow;
    }
  }
}

tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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.

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

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.

chart: {
  ...
  series: {
    ...
    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 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: {
      tooltip?: Tooltip;
      title?: string;
      fill?: string; // default: '#f3622d'
      fillOpacity?: number; // default: 1
      stroke?: string; // default: '#aa4520'
      strokeOpacity?: number; // default: 1
      strokeWidth?: number; // default: 1
      marker?: Marker;
      label?: Label;
      highlightStyle?: HighlightStyle;
    }
  }
}

tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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.

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

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.

chart: {
  ...
  series: {
    ...
    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 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: {
      tooltip?: Tooltip;
      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
      lineDash?: number[]; // default: []
      lineDashOffset?: number; // default: 0
      highlightStyle?: HighlightStyle;
      label?: Label;
      callout?: Callout;
      shadow?: Shadow;
    }
  }
}

tooltip

Series-specific tooltip configuration.

chart: {
  ...
  series: {
    ...
    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.

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

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  value: string;
}

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: {
  top?: Top;
  right?: Right;
  bottom?: Bottom;
  left?: Left;
  thickness?: number; // default: 0
  nice?: boolean; // default: true
  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]
  }
}

Common Series Configuration

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

series: {
  visible?: boolean; // default: true
  showInLegend?: boolean; // default: true
  cursor?: string; // default: 'default'
  listeners?: Object;
}