Press "Enter" to skip to content

A Simple And Configurable Line and Bar Chart Library | TChart.js

TChart.js is a simplified Javascript Bar and Line Chart library based on canvas to provide a simple, configurable, and dependency-free experience.

How to make use of it:

1. Create a container to carry the chart.

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

2. Prepare your information (an array of objects containing a label and value properties) to be plotted on 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 within the doc.

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

4. Create a brand new TChart instance.

let myChart = new TChart("example", 600, 450, data);

5. Plot the info as a line chart.

myChart.drawLineChart({ animation: true })

6. Plot the info as a bar chart.

myChart.drawBarChart({ animation: false })

Minimal Canvas Based Bar & Line Chart Library, TChart.js Plugin/Github

Bar-and-Line-Chart-TChart-Demo


See Demo And Download

Official Website(talhakhalid-tech): Click Here

This superior jQuery/javascript plugin is developed by talhakhalid-tech. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *