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

Preview:

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({ animation: true })

6. Plot the data as a bar chart.

myChart.drawBarChart({ animation: false })

Changelog:

02/26/2021

• Update

02/10/2021

• Added Bar and Line Growing Animation