Minimal Canvas Based Bar & Line Chart Library – TChart.js

Category: Chart & Graph , Javascript | August 6, 2020
Author:talhakhalid-tech
Views Total:76 views
Official Page:Go to website
Last Update:August 6, 2020
License:MIT

Preview:

Minimal Canvas Based Bar & Line Chart Library – TChart.js

Description:

TChart.js is a tiny (~5kb minified) JavaScript charting library to generate a canvas-based bar (column) or line chart from an array of JS objects.

How to use it:

1. Create a container to hold the chart.

<div id="example">
  ...
</div>

2. Prepare your data (an array of objects containing label and value properties) to be plotted to the chart.

let data = [
    { label: "Jan", value: 1 },
    { label: "Feb", value: 2 },
    { label: "March", value: 3 },
    { label: "April", value: 4 },
    { label: "May", value: 5 },
    { label: "June", value: 6 },
    { label: "July", value: 7 },
    { label: "Aug", value: 8 },
    { label: "Sep", value: 9 }
];

3. Load the TChart.js in the document.

<script src="TChart.js"></script>

4. Create a new TChart instance. Possible parameters:

  • targetId: container ID
  • width: width of the chart
  • height: height of the chart
  • data: chart data
let myChart = new TChart("example", 600, 450, data);

5. Plot the data as a line chart.

myChart.drawLineChart()

6. Plot the data as a bar chart.

myChart.drawBarChart()

You Might Be Interested In:


Leave a Reply