Skip to content

Latest commit

 

History

History
154 lines (136 loc) · 2.81 KB

README.md

File metadata and controls

154 lines (136 loc) · 2.81 KB
Raw

RealTimeChart

High performant chart rendering on canvas.

Fetures:
  • Meant to be fast, reduced CPU and memory usage
  • Rendering real time data
  • Responsive
  • Currently supports line and barchart
  • Hover callback

BarChart LineChart

Example code

Instance
const rtChart = new RealTimeChart(document.getElementById('canvas'));
Set options
rtChart.setOptions(optionsObject);
Feed the instance with data
rtChart.addChartData(10);
rtChart.addChartData([10, 20, 30]);
rtChart.addChartData({id: 'uniqId', value: 10});
rtChart.addChartData([{id: 'uniqId1', value: 10}, {id: 'uniqId2', value: 20}, {id: 'uniqId3', value: 30}]);
Render
rtChart.render();
Destroy
rtChart.destroy();
Options (public):
  • paddingBottom - extra padding from bottom
paddingBottom: 20, //Number
  • paddingRight - extra padding from right
paddingRight: 20, //Number
  • legend - legend containing colors, ids and titles
legend: [{
  id: 1, //Custom identifier
  color: '#846f08',
  title: 'Gold',
},
{
  id: 2,
  color: '#2cabe3',
  title: 'Revenue',
}]
  • showRuler - show the min max and the central value
showRuler: true, //Boolean
  • showFrame
showFrame: true, //Boolean
  • width - width of the canvas
width: 300, //Number
  • height - height of the canvas
height: 300, //Number
  • frameColor
frameColor: '#ddd', //RGB(A), HEX
  • textColor
textColor: '#313131', //RGB(A), HEX
  • minValue - minimum value of the incoming date
minValue: 1, //Number
  • maxValue - maximum value of the incoming data
maxValue: 600, //Number
  • totalElement - how many elements are going to be seen on the chart
totalElement: 20, //Number
  • type - type of the chart
type: 'line|bar', //Line or Bar chart
  • onHover - callback for for hover status on the chart, returning the data for the hovered element
onHover: (data) => {}, //Function
  • waitWindowLoad - wait settings to be configured only after window load happened
waitWindowLoad: true, //Boolean
  • isResponsive - should the canvas resize when window resize
isResponsive: false, //Boolean
  • calcMaxValue - calculate the max value according to the input, new max value is increased by 10%. (newMaxValue = inputValue + inputValue * 0.1)
calcMaxValue: false, //Boolean

More examples are in the examples folder.

Build

npm run build

Prettier src

npm run prettier

Missing

  • tests
  • other type of charts
  • more examples
  • commenting the code

Contact

Version

1.2.0