Skip to main content

​
Quickstart

Get a fully interactive chart running in your application in just a few steps. This guide will walk you through creating a basic line chart with real-time interactivity.

​
Create your first chart

1

Create an HTML container

Add a container element to your HTML where the chart will be rendered. The chart will automatically adapt to the container’s dimensions.
<div id="chart" style="width: 100%; height: 400px;"></div>
Make sure to set explicit dimensions on the container. Kinetix Charts will fill the container’s width and height.
2

Import and initialize the chart

Import the Chart class from Kinetix Charts and create a new chart instance with your data.
import { Chart } from 'kinetix-charts';

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

const chart = new Chart(container, {
  theme: 'dark',
  series: [
    {
      type: 'line',
      name: 'Revenue',
      color: '#6366f1',
      data: [
        { x: 0, y: 10 },
        { x: 1, y: 25 },
        { x: 2, y: 18 },
        { x: 3, y: 35 },
        { x: 4, y: 28 }
      ]
    }
  ]
});
That’s it! Your chart is now rendered and fully interactive.
3

Try the interactions

The chart comes with built-in interactivity - no additional configuration needed:
  • Pan: Click and drag on the chart to pan along the X-axis
  • Zoom: Use your scroll wheel to zoom in and out
  • Tooltips: Hover over data points to see their exact values
The Y-axis automatically scales to fit the visible data range when you pan or zoom. This ensures your data is always displayed at an optimal scale.

​
Complete working example

Here’s a complete HTML file you can use to test Kinetix Charts: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kinetix Charts - Quickstart</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: system-ui, -apple-system, sans-serif;
      background: #0f172a;
    }
    #chart {
      width: 100%;
      height: 400px;
      background: #1e293b;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div id="chart"></div>

  <script type="module">
    import { Chart } from 'kinetix-charts';

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

    const chart = new Chart(container, {
      theme: 'dark',
      series: [
        {
          type: 'line',
          name: 'Revenue',
          color: '#6366f1',
          data: [
            { x: 0, y: 10 },
            { x: 1, y: 25 },
            { x: 2, y: 18 },
            { x: 3, y: 35 },
            { x: 4, y: 28 }
          ]
        }
      ]
    });
  </script>
</body>
</html>

​
Understanding the configuration

Let’s break down the chart configuration:
  • theme: Sets the color scheme ('light' or 'dark')
  • series: Array of data series to display on the chart
    • type: Chart type ('line', 'bar', 'scatter', 'pie')
    • name: Series name shown in the legend and tooltips
    • color: Hex color code for the series
    • data: Array of data points with x and y coordinates
You can add multiple series to the same chart by adding more objects to the series array. Each series can have a different type and color.

​
Default features

Every Kinetix Chart includes these features by default: Pan and zoom: Enabled automatically for charts with numeric X-axis values. Pan and zoom are disabled for categorical charts (like bar charts with text labels) to ensure all categories remain visible. Tooltips: Hover over any data point to see its value. For charts with multiple series, the tooltip shows all series values at that X coordinate. Responsive sizing: Charts automatically resize when the container dimensions change. Smart legend: A legend appears in the top-right corner showing all series. It automatically repositions to avoid blocking your data. Smooth animations: All chart types render with smooth animations on initial load.
Pan and zoom interactions are disabled for categorical X-axis charts (e.g., bar charts with text labels like “Jan”, “Feb”, “Mar”). This ensures all categories remain visible at all times.

​
Next steps

Now that you have a working chart, explore more features:

Chart types

Learn about line, bar, scatter, pie, and stacked charts

API reference

Explore the complete API and configuration options

Theming

Customize colors and themes for your charts

Performance

Optimize charts for large datasets

Build docs developers (and LLMs) love

Get started for freeTalk to us