Configuration

The ChartConfig interface defines all available options for configuring a chart’s appearance, behavior, and data.

ChartConfig

Main configuration object passed to the Chart constructor or update() method.

width

number

Width of the chart in pixels. If not specified, defaults to the container’s width.

height

number

Height of the chart in pixels. If not specified, defaults to the container’s height.

padding

object

Padding around the chart area to make room for axes and labels.Default: { top: 20, right: 20, bottom: 40, left: 60 }

padding.top

number

Top padding in pixels

padding.right

number

Right padding in pixels

padding.bottom

number

Bottom padding in pixels

padding.left

number

Left padding in pixels

xAxis

AxisConfig

Configuration for the X axis. See AxisConfig below.

yAxis

AxisConfig

Configuration for the Y axis. See AxisConfig below.

series

SeriesConfig[]

Array of series to display on the chart. Each series can be a line, bar, pie, or scatter series. See SeriesConfig below.

theme

'light' | 'dark'

Visual theme for the chart. Affects background colors, text colors, and axis colors.Default: 'light'

startFromZero

boolean

When true, the Y axis will start from zero if all Y values are positive. This provides better visual context for magnitude comparisons.Default: true

startXFromZero

boolean

When true, the X axis will start from zero if all X values are positive.Default: false

Example

const config: ChartConfig = {
  width: 800,
  height: 400,
  padding: { top: 20, right: 30, bottom: 50, left: 70 },
  theme: 'dark',
  startFromZero: true,
  xAxis: {
    type: 'numeric',
    visible: true,
    xTickCount: 10
  },
  yAxis: {
    visible: true,
    yTickCount: 8
  },
  series: [
    {
      type: 'line',
      name: 'Sales',
      color: '#ef4444',
      data: [
        { x: 0, y: 10 },
        { x: 1, y: 20 },
        { x: 2, y: 15 }
      ]
    }
  ]
};

AxisConfig

Configuration options for chart axes (both X and Y).

min

number

Minimum value for the axis domain. If not specified, calculated automatically from data.

max

number

Maximum value for the axis domain. If not specified, calculated automatically from data.

type

'numeric' | 'datetime' | 'categorical'

Type of scale to use for the axis.

'numeric': Linear scale for numeric data (default)
'datetime': Time scale for date/time data
'categorical': Categorical scale for string labels

Default: 'numeric'

visible

boolean

Whether to display the axis. When false, hides both axis lines and labels.Default: true (except for pie charts, which default to false)

xTickCount

number

Number of tick marks and labels to display on the X axis.Default: 10

yTickCount

number

Number of tick marks and labels to display on the Y axis.Default: 10

xLabelFormat

(val: number) => string

Custom formatter function for X axis labels. Receives the numeric value and should return a formatted string.

xLabelFormat: (val) => `$${val.toFixed(2)}`

yLabelFormat

(val: number) => string

Custom formatter function for Y axis labels. Receives the numeric value and should return a formatted string.

yLabelFormat: (val) => `${val}%`

gridColor

string

Color for grid lines (CSS color string). If not specified, uses theme default.

textColor

string

Color for axis labels and tick text (CSS color string). If not specified, uses theme default.

font

string

CSS font specification for axis labels.Default: '12px sans-serif'

theme

'light' | 'dark'

Theme for the axis appearance. Usually set automatically from the chart’s theme.Default: 'light'

scrollable

boolean

For categorical axes, enables horizontal scrolling when there are many categories. When true, the chart becomes horizontally scrollable if there are more than 20 categories or if explicitly enabled.Default: false (auto-enabled for >20 categories)

Example

const xAxis: AxisConfig = {
  type: 'numeric',
  min: 0,
  max: 100,
  visible: true,
  xTickCount: 10,
  xLabelFormat: (val) => val.toFixed(1)
};

SeriesConfig

Union type for all series configurations. Each chart can contain multiple series of different types.

type SeriesConfig =
  | LineSeriesConfig
  | BarSeriesConfig
  | PieSeriesConfig
  | ScatterSeriesConfig;

BaseSeriesConfig

Common properties shared by all series types.

type

string

required

Type of series: 'line', 'bar', 'pie', or 'scatter'

name

string

Display name for the series, shown in the legend and tooltips.

color

string

CSS color string for the series. If not specified, a color is automatically assigned from the chart’s color palette.

visible

boolean

Whether the series is visible. Hidden series are not rendered but remain in the chart.Default: true

LineSeriesConfig

Configuration for line series.

type

'line'

required

Must be 'line'

data

Point[]

required

Array of data points. Each point must have x and y properties.

type Point = { x: number | string; y: number };

Example

const lineSeries: LineSeriesConfig = {
  type: 'line',
  name: 'Temperature',
  color: '#3b82f6',
  data: [
    { x: 0, y: 20 },
    { x: 1, y: 22 },
    { x: 2, y: 19 },
    { x: 3, y: 23 }
  ]
};

BarSeriesConfig

Configuration for bar series.

type

'bar'

required

Must be 'bar'

data

Point[]

required

Array of data points. Each point must have x and y properties.

barWidth

number

Width of each bar in pixels. If not specified, calculated automatically based on available space.

deltaMode

boolean

When true, shows bar heights relative to the minimum value in the dataset. This is useful for visualizing small variations in data with large baseline values.Default: false

align

'center' | 'start' | 'end'

Alignment of bars relative to their X value.

'center': Bar is centered on the X value (default for regular bar charts)
'start': Bar starts at the X value (useful for histograms)
'end': Bar ends at the X value

Default: 'center'

stacked

boolean

Reserved for future stacked bar chart support. Currently not used directly by series.

Example

const barSeries: BarSeriesConfig = {
  type: 'bar',
  name: 'Revenue',
  color: '#10b981',
  barWidth: 30,
  align: 'center',
  data: [
    { x: 0, y: 100 },
    { x: 1, y: 150 },
    { x: 2, y: 120 },
    { x: 3, y: 180 }
  ]
};

PieSeriesConfig

Configuration for pie and donut charts.

type

'pie'

required

Must be 'pie'

data

PieData[]

required

Array of pie segments. Each segment has a label and value.

type PieData = { label: string; value: number };

innerRadius

number

Inner radius as a fraction of the outer radius (0-1). Use values > 0 to create a donut chart.

0: Full pie chart (default)
0.5: Donut chart with 50% inner radius
0.7: Donut chart with 70% inner radius

Default: 0

Example

const pieSeries: PieSeriesConfig = {
  type: 'pie',
  name: 'Market Share',
  innerRadius: 0.5, // Creates a donut chart
  data: [
    { label: 'Product A', value: 30 },
    { label: 'Product B', value: 45 },
    { label: 'Product C', value: 25 }
  ]
};

ScatterSeriesConfig

Configuration for scatter plot series.

type

'scatter'

required

Must be 'scatter'

data

Point[]

required

Array of data points. Each point must have x and y properties.

radius

number

Radius of each scatter point in pixels.Default: 4

Example

const scatterSeries: ScatterSeriesConfig = {
  type: 'scatter',
  name: 'Data Points',
  color: '#ec4899',
  radius: 5,
  data: [
    { x: 10, y: 20 },
    { x: 15, y: 35 },
    { x: 20, y: 25 },
    { x: 25, y: 40 }
  ]
};

Complete example

Here’s a complete configuration example combining multiple features:

import { Chart, ChartConfig } from 'kinetix-charts';

const config: ChartConfig = {
  theme: 'dark',
  padding: { top: 30, right: 30, bottom: 60, left: 80 },
  startFromZero: true,
  
  xAxis: {
    type: 'numeric',
    visible: true,
    xTickCount: 12,
    xLabelFormat: (val) => `Month ${Math.floor(val)}`
  },
  
  yAxis: {
    visible: true,
    yTickCount: 8,
    yLabelFormat: (val) => `$${(val / 1000).toFixed(0)}K`
  },
  
  series: [
    {
      type: 'line',
      name: 'Revenue',
      color: '#10b981',
      data: [
        { x: 1, y: 45000 },
        { x: 2, y: 52000 },
        { x: 3, y: 48000 },
        { x: 4, y: 61000 },
        { x: 5, y: 58000 },
        { x: 6, y: 67000 }
      ]
    },
    {
      type: 'line',
      name: 'Expenses',
      color: '#ef4444',
      data: [
        { x: 1, y: 38000 },
        { x: 2, y: 41000 },
        { x: 3, y: 39000 },
        { x: 4, y: 43000 },
        { x: 5, y: 42000 },
        { x: 6, y: 45000 }
      ]
    },
    {
      type: 'bar',
      name: 'Profit',
      color: '#3b82f6',
      align: 'center',
      data: [
        { x: 1, y: 7000 },
        { x: 2, y: 11000 },
        { x: 3, y: 9000 },
        { x: 4, y: 18000 },
        { x: 5, y: 16000 },
        { x: 6, y: 22000 }
      ]
    }
  ]
};

const container = document.getElementById('chart');
const chart = new Chart(container, config);

Core

Series

Components

Utilities

ChartConfig

Example

AxisConfig

Example

SeriesConfig

BaseSeriesConfig

LineSeriesConfig

BarSeriesConfig

PieSeriesConfig

ScatterSeriesConfig

Complete example

Build docs developers (and LLMs) love

Core

Series

Components

Utilities

​ChartConfig

​Example

​AxisConfig

​Example

​SeriesConfig

​BaseSeriesConfig

​LineSeriesConfig

​BarSeriesConfig

​PieSeriesConfig

​ScatterSeriesConfig

​Complete example

Build docs developers (and LLMs) love

ChartConfig

Example

AxisConfig

Example

SeriesConfig

BaseSeriesConfig

LineSeriesConfig

BarSeriesConfig

PieSeriesConfig

ScatterSeriesConfig

Complete example