core-chart-js (alpha stage)
This is a minimal library for building complex, efficient and highly customized chart. No rendering is included. Write the rendering by your self. Write the animation by your self.
Why Core Chart?
- High performance
- Highly customizable
- Built in zoom, pan support
Chart.js could handle most case. Also other libraries like amCharts provide many advance features too. However, it's often that we get some special requirements that the existing libraries does not provide. For example, a high performance chart that need to display 1000+ data points on a mobile device with pan and zoom.
Even though we found a library that suit the case currently, it is possible that the requirement change in the future and force you to change a library or even write your own. Core Chart is a project to be the base for building customized charts.
Note: If you just have complex requirement, you may consider Chart.js + plugins, however, at the time when I create this project, i didn't see much documentation of how to write a chart.js plugin.
We offer you
The library offers you the base classes to create charts and sample codes to render and optimize.
Only three classes you need to know:
- CoreChart
- Axis
- Animation (optional)
Sample use case and codes:
- LineChart
- BarChart with label
Quick start
Here is the quickest way to get started. But when you decided to write your own chart, you should understand the core concepts first.
const canvas = document; // data pointsconst data = x:1 y:5 x:2 y:3 x:3 y:-2 x:45 y:4 x:5 y:1 ; const xAxis = 'x';const yAxis = 'y'; // as canvas has inversed y axis value, YAxis fixes this const chart = canvas;chart;chart; // set the region that the data should draw tochart; chart; chart; // (optional) enable pinch and pancanvas chart; // Do your renderingchart;
You may make a bar chart like this
chart;
Getting started
Concepts:
- Data space: the raw value of the data
- Canvas space: the projection result
- d2c, c2d: the conversion from data space to canvas space and vice versa.
Core Classes and methods:
- CoreChart
- setViewPort()
- scroll()
- zoom()
- Axis
- d2c(): transform a value from data space to canvas space
- c2d(): transform a value from canvas space to data space
- ticks(): find the ticks that should be rendered
- Animation (optional)
APIs
CoreChart
The chart controller.
Axis
The axis of the chart.
Examples
see dev-src/charts
Contributing
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# run unit tests while developmentnpm run unit-dev# run all testsnpm test
TODO
- write documentation