General Chart Customisation

These customisations can be applied to any type of chart.

Option Interfaces

interface ChartOptions { width: number, // default: 800 height: number; // default: 400 padding: PaddingOptions; background: BackgroundOptions; // If the title is disabled, the subtitle won't be visible either title: CaptionOptions; subtitle: CaptionOptions; legend: LegendOptions; // Additional CSS class to be added to the tooltip element tooltipClass?: string; } interface PaddingOptions { top: number; // default: 20 right: number; // default: 20 bottom: number; // default: 20 left: number; // default: 20 } interface BackgroundOptions { fill: string; // default: <dependent on light/dark mode> visible: boolean; // default: true } interface CaptionOptions { enabled: boolean; // default: false text?: string; fontStyle: FontStyle; // default: 'normal' fontWeight: FontWeight; // default: 'bold' for title, 'normal' for subtitle fontSize: number; // default: 16 (for title), 12 (for subtitle) 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 LegendOptions { enabled: boolean; // default: true position: LegendPosition; // default: 'right' padding: number; // default: 20 item: LegendItemOptions; } type LegendPosition = 'top' | 'right' | 'bottom' | 'left'; interface LegendItemOptions { label: LegendLabelOptions; marker: LegendMarkerOptions; paddingX: number; // default: 16 paddingY: number; // default: 8 } interface LegendLabelOptions { 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> } interface LegendMarkerOptions { type: MarkerType; // default: 'square' size: number; // default: 15 padding: number; // default: 8 strokeWidth: number; // default: 1 } type MarkerType = 'circle' | 'cross' | 'diamond' | 'plus' | 'square' | 'triangle';

Example: General Chart Customisations

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