Cartesian Chart Customisation

In addition to the general chart customisations, you can also use these customisations for cartesian charts, which have an x- and y-axis.

Option Interfaces

interface CartesianChartOptions { xAxis: AxisOptions; yAxis: AxisOptions; } interface AxisOptions { // Allows the type of the axis to be specified. This should be used with caution as it // could cause the graph to fail to render if the data is incompatible type?: AxisType; title: CaptionOptions; line: AxisLineOptions; tick: AxisTickOptions; label: AxisLabelOptions; // The styles of the grid lines. These are repeated. If only a single style is provided, // it will be used for all grid lines, if two styles are provided, every style will be // used by every other line, and so on. gridStyle: GridStyle[]; } type AxisType = 'category' | 'number' | 'time'; interface CaptionOptions { enabled: boolean; // default: false text?: string; fontStyle: FontStyle; // default: 'normal' fontWeight: FontWeight; // default: 'normal' fontSize: number; // default: 14 fontFamily: string; // default: 'Verdana, sans-serif' color: string; // default: <dependent on light/dark mode> } type FontStyle = 'normal' | 'italic' | 'oblique'; type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; interface AxisLineOptions { width: number; // default: 1 color: string; // default: 'rgba(195, 195, 195, 1)' } interface AxisTickOptions { width: number; // default: 1 size: number; // default: 6 color: string; // default: 'rgba(195, 195, 195, 1)' } interface AxisLabelOptions { fontStyle: FontStyle; // default: 'normal' fontWeight: FontWeight; // default: 'normal' fontSize: number; // default: 12 fontFamily: string; // default: 'Verdana, sans-serif' color: string; // default: <dependent on light/dark mode> padding: number; // default: 5 rotation: number; // default: <dependent on chart type. Overridden for default category> // For time axes, a format string can be provided, which will be used to format the labels. // See below for more information about the format options. // This will be ignored for any other type of axis. format?: string; // A custom formatter function for the axis labels. If the value is a number, the number of // fractional digits used by the axis step will be provided as well. formatter?: (value: any, fractionDigits?: number) => string; } interface GridStyle { stroke: string; // default: <dependent on light/dark mode> // The line dash array. Every number in the array specifies the length of alternating // dashes and gaps. For example, [6, 3] means dash of length 6 and gap of length 3. // If undefined, a solid line will be used. lineDash?: number[]; // default: [4, 2] }

Example: Cartesian Chart Customisations

The example below changes all available styling options. The styling options are exaggerated to demonstrate each option rather than to produce a chart that looks nice!

Axis Types

Charts can use different types of axes to present data in different ways. The grid will select best-guess defaults based on the type of chart, the column chart data types, and the data being plotted. If required, you can override the default axis types for line and scatter/bubble charts by setting the type in the relevant AxisOptions object.

Changing the default axis types can result in nonsensical or broken charts - please use with caution!

There are three types of axis available: 'category', 'number' and 'time'.

Category

This is a discrete axis used for showing data based on a collection of categories. It is used automatically for 'category' columns. If no category column is selected and this axis is used, default category names will be created using an ascending numeric sequence.

Number

This is a continuous axis used for plotting numerical values. It is used automatically for 'series' columns that contain number values.

Time

This is a continuous axis used for plotting date/time values. It is used automatically in line and scatter/bubble charts for columns that contain Date values. Use of this type of axis allows the creation of time series charts.

Format String

For time axes, a format string can be provided, which will be used to format the data for display as axis labels. The format string may contain the following directives, which reflect those from Python's strftime:

  • %a - abbreviated weekday name.*
  • %A - full weekday name.*
  • %b - abbreviated month name.*
  • %B - full month name.*
  • %c - the locale’s date and time, such as %x, %X.*
  • %d - zero-padded day of the month as a decimal number [01,31].
  • %e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
  • %f - microseconds as a decimal number [000000,999999].
  • %H - hour (24-hour clock) as a decimal number [00,23].
  • %I - hour (12-hour clock) as a decimal number [01,12].
  • %j - day of the year as a decimal number [001,366].
  • %m - month as a decimal number [01,12].
  • %M - minute as a decimal number [00,59].
  • %L - milliseconds as a decimal number [000,999].
  • %p - either AM or PM.*
  • %Q - milliseconds since UNIX epoch.
  • %s - seconds since UNIX epoch.
  • %S - second as a decimal number [00,61].
  • %u - Monday-based (ISO) weekday as a decimal number [1,7].
  • %U - Sunday-based week of the year as a decimal number [00,53].
  • %V - ISO 8601 week number of the year as a decimal number [01, 53].
  • %w - Sunday-based weekday as a decimal number [0,6].
  • %W - Monday-based week of the year as a decimal number [00,53].
  • %x - the locale’s date, such as %-m/%-d/%Y.*
  • %X - the locale’s time, such as %-I:%M:%S %p.*
  • %y - year without century as a decimal number [00,99].
  • %Y - year with century as a decimal number.
  • %Z - time zone offset, such as -0700, -07:00, -07, or Z.
  • %% - a literal percent sign (%).

Directives marked with an asterisk (*) may be affected by the locale definition.

For %U, all days in a new year preceding the first Sunday are considered to be in week 0.
For %W, all days in a new year preceding the first Monday are considered to be in week 0.

For %V, per the strftime man page:

In this system, weeks start on a Monday, and are numbered from 01, for the first week, up to 52 or 53, for the last week. Week 1 is the first week where four or more days fall within the new year (or, synonymously, week 01 is: the first week of the year that contains a Thursday; or, the week that has 4 January in it).

The % sign indicating a directive may be immediately followed by a padding modifier:

  1. 0 - zero-padding
  2. _ - space-padding
  3. (nothing) - disable padding
If no padding modifier is specified, the default is 0 for all directives except %e, which defaults to _.

Example: Time Series Chart

This example shows how a time series chart can be created. It demonstrates explicitly setting the axis type to 'time', but you can also remove this and the chart will still use the time axis as it automatically detects the axis type from the data in the Date column.