Skip to main content
The Chart class is the main entry point for creating charts with Kinetix. It manages the rendering, data, interactions, and all visual elements of your chart.

​
Constructor

Create a new chart instance by providing a container element and optional configuration. 
const chart = new Chart(container: HTMLElement, config?: ChartConfig)
​
container
HTMLElement
required
The DOM element that will contain the chart. The chart will automatically size to fit this container.
​
config
ChartConfig
Optional configuration object to initialize the chart with series, axes, theme, and other settings. See the Configuration page for details.

​
Example

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

​
Public properties

​
container
HTMLElement
The DOM element containing the chart.
​
series
Series[]
Array of all series currently in the chart.
​
padding
{ top: number; right: number; bottom: number; left: number }
Padding around the chart area. Default: { top: 20, right: 20, bottom: 40, left: 60 }
​
startFromZero
boolean
Start Y axis from zero when all values are positive. Default: true
​
startXFromZero
boolean
Start X axis from zero when all values are positive. Default: false

​
Methods

​
update

Update the chart with new configuration, replacing existing series and settings. 
chart.update(config: ChartConfig): void
​
config
ChartConfig
required
Complete or partial chart configuration to apply. This will replace any existing series if config.series is provided.
chart.update({
  series: [
    {
      type: 'bar',
      name: 'Revenue',
      data: [{ x: 0, y: 100 }, { x: 1, y: 150 }]
    }
  ]
});

​
addSeries

Add a new series to the chart without removing existing series. 
chart.addSeries(seriesConfig: SeriesConfig): void
​
seriesConfig
SeriesConfig
required
Configuration for the series to add. Can be a line, bar, pie, or scatter series configuration.
Example
chart.addSeries({
  type: 'line',
  name: 'New Series',
  color: '#ef4444',
  data: [
    { x: 0, y: 5 },
    { x: 1, y: 10 },
    { x: 2, y: 8 }
  ]
});

​
pan

Pan the chart view horizontally. Only works with numeric/datetime axes (not categorical). 
chart.pan(dx: number, dy: number): void
​
dx
number
required
Horizontal pixel offset to pan. Positive values pan right, negative values pan left.
​
dy
number
required
Vertical pixel offset (currently not used, reserved for future use).
Example
// Pan 50 pixels to the right
chart.pan(50, 0);

// Pan 50 pixels to the left
chart.pan(-50, 0);

​
zoom

Zoom the chart view in or out around a specific pixel position. 
chart.zoom(factor: number, centerPixel: number): void
​
factor
number
required
Zoom factor. Values > 1 zoom in, values < 1 zoom out. For example, 2 zooms in 2x, 0.5 zooms out 2x.
​
centerPixel
number
required
The pixel position (X coordinate) around which to zoom.
Example
// Zoom in 2x around the center of the chart
const centerX = chart.container.clientWidth / 2;
chart.zoom(2, centerX);

// Zoom out 2x
chart.zoom(0.5, centerX);

​
toggleSeries

Toggle the visibility of a series by index. 
chart.toggleSeries(index: number): void
​
index
number
required
Zero-based index of the series to toggle.
Example
// Toggle the first series
chart.toggleSeries(0);

​
setSeriesVisibility

Set the visibility of a specific series. 
chart.setSeriesVisibility(index: number, visible: boolean): void
​
index
number
required
Zero-based index of the series to modify.
​
visible
boolean
required
Whether the series should be visible.
Example
// Hide the first series
chart.setSeriesVisibility(0, false);

// Show the second series
chart.setSeriesVisibility(1, true);

​
getSeriesInfo

Get information about all series in the chart. 
chart.getSeriesInfo(): Array<{
  index: number;
  name: string;
  color: string;
  visible: boolean;
  type: string;
}>
Returns: Array of objects containing series metadata.
Example
const seriesInfo = chart.getSeriesInfo();
console.log(seriesInfo);
// [
//   { index: 0, name: 'Sales', color: '#ef4444', visible: true, type: 'line' },
//   { index: 1, name: 'Revenue', color: '#f59e0b', visible: true, type: 'bar' }
// ]

​
updateAxis

Update axis configuration without recreating the chart. 
chart.updateAxis(xAxisConfig?: Partial<AxisConfig>, yAxisConfig?: Partial<AxisConfig>): void
​
xAxisConfig
Partial<AxisConfig>
Partial X axis configuration to merge with existing settings.
​
yAxisConfig
Partial<AxisConfig>
Partial Y axis configuration to merge with existing settings (currently uses same config as X axis).
Example
chart.updateAxis({
  visible: true,
  type: 'datetime',
  xLabelFormat: (val) => new Date(val).toLocaleDateString()
});

​
setGridVisible

Show or hide the grid lines. 
chart.setGridVisible(visible: boolean): void
​
visible
boolean
required
Whether the grid should be visible.
Example
// Show grid
chart.setGridVisible(true);

// Hide grid
chart.setGridVisible(false);

​
setTheme

Change the chart theme. 
chart.setTheme(theme: 'light' | 'dark'): void
​
theme
'light' | 'dark'
required
The theme to apply.
Example
// Switch to dark theme
chart.setTheme('dark');

// Switch to light theme
chart.setTheme('light');

​
updateSeries

Update properties of a specific series by index. 
chart.updateSeries(index: number, config: Partial<BaseSeriesConfig>): void
​
index
number
required
Zero-based index of the series to update.
​
config
Partial<BaseSeriesConfig>
required
Partial series configuration with properties to update (color, name, visible).
Example
// Update series color and name
chart.updateSeries(0, {
  color: '#10b981',
  name: 'Updated Series Name'
});

// Hide a series using updateSeries
chart.updateSeries(0, { visible: false });

​
getCanvasImage

Generate a PNG data URL of the chart for export or display. 
chart.getCanvasImage(options?: {
  scale?: number;
  width?: number;
  height?: number;
  view?: { x: number; y: number; width: number; height: number };
}): string
​
options
object
Optional export settings.
​
options.scale
number
Scale factor for high resolution export. Default: 2 (for retina displays). Use 1 for standard resolution.
​
options.width
number
Target width in pixels. Defaults to current chart width.
​
options.height
number
Target height in pixels. Defaults to current chart height.
​
options.view
object
Custom view window in data coordinates (advanced usage).
Returns: PNG data URL string that can be used in an <img> tag or downloaded.
Example
// Get standard resolution image
const imageUrl = chart.getCanvasImage({ scale: 1 });

// Get high resolution image at specific size
const hiResUrl = chart.getCanvasImage({
  scale: 2,
  width: 1200,
  height: 600
});

// Display in an image element
const img = document.createElement('img');
img.src = hiResUrl;
document.body.appendChild(img);

​
downloadImage

Download the chart as a PNG image file. 
chart.downloadImage(filename?: string, options?: {
  scale?: number;
  width?: number;
  height?: number;
  window?: { xMin: number; xMax: number; yMin?: number; yMax?: number };
}): void
​
filename
string
Name of the file to download. Default: 'chart.png'
​
options
object
Optional export settings (same as getCanvasImage options).
​
options.scale
number
Scale factor for high resolution. Default: 2
​
options.width
number
Target width in pixels.
​
options.height
number
Target height in pixels.
​
options.window
object
Custom data window to export (xMin, xMax, yMin, yMax).
Example
// Download with default settings
chart.downloadImage();

// Download with custom filename and size
chart.downloadImage('my-chart.png', {
  scale: 2,
  width: 1920,
  height: 1080
});

// Download a specific data window
chart.downloadImage('chart-region.png', {
  window: { xMin: 0, xMax: 100, yMin: 0, yMax: 50 }
});

Build docs developers (and LLMs) love

Get started for freeTalk to us