![\"interactive](\"https://bytebucket.org/icefee/interactive-chart/raw/aef189e3e4799bd815ad126d97c54dd76f8fcc2a/assets/logo.png\"){kind=logo}
\r \r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r \r
\r A interactive chart library(0 dependence)\r
\r\n \r\n
\r\n A interactive chart library(0 dependence)\r\n
![\"line](\"./assets/line.png\")
](https://bytebucket.org/icefee/interactive-chart/raw/aef189e3e4799bd815ad126d97c54dd76f8fcc2a/assets/line.png)\r\n\r\n```javascript\r\n// import the library\r\nimport Line from '@data-vision/interactive-chart/line'\r\n\r\n// get the element for mounting chart instance\r\nconst container = document.querySelector('#chart-line')\r\n\r\n// create chart instance\r\nconst lineChart = new Line(contaner)\r\n\r\n// 100,000 data points\r\nvar DATA_COUNT = 100_000\r\n\r\n// create random data\r\nconst randomData = Array.from(\r\n { length: DATA_COUNT },\r\n (_, t) => Math.floor(Math.sin(t) * Math.random() * 20)\r\n)\r\n\r\n// set chart data\r\nlineChart.setData([\r\n {\r\n color: 'hsl(200 100% 50%)',\r\n data: randomData\r\n },\r\n {\r\n color: 'hsl(0 100% 50%)',\r\n data: randomData\r\n }\r\n])\r\n\r\n```\r\n\r\n* Bar chart\r\n\r\n![![\"bar](\"./assets/bar.png\")
](https://bytebucket.org/icefee/interactive-chart/raw/aef189e3e4799bd815ad126d97c54dd76f8fcc2a/assets/bar.png)\r\n\r\n```javascript\r\n// import the library\r\nimport Bar from '@data-vision/interactive-chart/bar'\r\n\r\n// get the element for mounting chart instance\r\nconst container = document.querySelector('#chart-bar')\r\n\r\n// create chart instance\r\nconst barChart = new Bar(contaner)\r\n\r\n// 100,000 data points\r\nvar DATA_COUNT = 100_000\r\n\r\n// create random data\r\nconst randomData = Array.from(\r\n { length: DATA_COUNT },\r\n (_, t) => Math.floor(Math.sin(t) * Math.random() * 20)\r\n)\r\n\r\n// set chart data\r\nbarChart.setData(\r\n {\r\n color: ['hsl(200 100% 50%)', 'hsl(0 100% 50%)'],\r\n data: randomData\r\n }\r\n)\r\n\r\n```\r\n\r\n* Heatmap\r\n\r\n![![\"heatmap\"](\"./assets/heatmap.png\")
](https://bytebucket.org/icefee/interactive-chart/raw/aef189e3e4799bd815ad126d97c54dd76f8fcc2a/assets/heatmap.png)\r\n\r\n```javascript\r\n// import the library\r\nimport HeatMap from '@data-vision/interactive-chart/heatmap'\r\n\r\n// get the element for mounting chart instance\r\nconst container = document.querySelector('#chart-heat')\r\n\r\n// set text painting style\r\nHeatMap.config.textColor = '#ccc'\r\n// set max data cache size\r\nHeatMap.config.maxCacheSize = 200\r\n\r\n// create chart instance\r\nconst barChart = new HeatMap(contaner)\r\n\r\n// 100,000 data points\r\nvar DATA_COUNT = 100_000\r\n\r\nlet i = 0\r\nsetInterval(\r\n () => {\r\n // loop make real data\r\n const data = Uint8ClampedArray.from({\r\n length: DATA_COUNT\r\n }, (_, j) => (j * 32 + i) % 256)\r\n heatMap.setData(data)\r\n i += 8\r\n },\r\n 10\r\n)\r\n\r\n```\r\n","readmeFilename":"README.md"}