Features

• Built in interaction for mouse and touch, including mouse wheel, crop, pan, zoom
• High-performance, over 100,000 data points with 60fps render
• Easy to use, no framework limit
• Optimize for different screen scaling ratios
• Rich customization options

Online Demo

Online Demo

Install

// npm
npm install @data-vision/interactive-chart

// yarn
yarn add @data-vision/interactive-chart

// pnpm
pnpm add @data-vision/interactive-chart

// bun
bun add @data-vision/interactive-chart

Support Charts

Currently supports 3 types of charts:

• Line chart

// import the library
import Line from '@data-vision/interactive-chart/line'

// get the element for mounting chart instance
const container = document.querySelector('#chart-line')

// create chart instance
const lineChart = new Line(contaner)

// 100,000 data points
var DATA_COUNT = 100_000

// create random data
const randomData = Array.from(
  { length: DATA_COUNT },
  (_, t) => Math.floor(Math.sin(t) * Math.random() * 20)
)

// set chart data
lineChart.setData([
  {
    color: 'hsl(200 100% 50%)',
    data: randomData
  },
  {
    color: 'hsl(0 100% 50%)',
    data: randomData
  }
])

• Bar chart

// import the library
import Bar from '@data-vision/interactive-chart/bar'

// get the element for mounting chart instance
const container = document.querySelector('#chart-bar')

// create chart instance
const barChart = new Bar(contaner)

// 100,000 data points
var DATA_COUNT = 100_000

// create random data
const randomData = Array.from(
  { length: DATA_COUNT },
  (_, t) => Math.floor(Math.sin(t) * Math.random() * 20)
)

// set chart data
barChart.setData(
  {
    color: ['hsl(200 100% 50%)', 'hsl(0 100% 50%)'],
    data: randomData
  }
)

• Heatmap

// import the library
import HeatMap from '@data-vision/interactive-chart/heatmap'

// get the element for mounting chart instance
const container = document.querySelector('#chart-heat')

// set text painting style
HeatMap.config.textColor = '#ccc'
// set max data cache size
HeatMap.config.maxCacheSize = 200

// create chart instance
const barChart = new HeatMap(contaner)

// 100,000 data points
var DATA_COUNT = 100_000

let i = 0
setInterval(
  () => {
    // loop make real data
    const data = Uint8ClampedArray.from({
      length: DATA_COUNT
    }, (_, j) => (j * 32 + i) % 256)
    heatMap.setData(data)
    i += 8
  },
  10
)