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

TChart.js is a simple Javascript Bar and Line Chart library based on Canvas along with animations if the user wants to create animated charts. TChart.js is an optical library to provide a simple, configurable, and dependency-free experience.

Drawing Chart

After creating the methods, call the TChart object to create a line or bar chart.

Parameters

  • chartId - containerId (String) Defines the id of the container like “chart“.

  • chartWidth (Integer) Defines the width of the chart as 600.

  • chartHeight (Integer) Defines the Height of the chart as 450.

  • data (Objects Array)¬†Defines the data objects. The objects should have 2 key-value pairs: label and value.

Must Read: Declarative, Interactive Linked Chart & Graph Components | vueplotlib

How to make use of it:

1. Download TChart.min.js and include it in your project.

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

2. To create a bar or line chart, you will need a block-level container.

<div id="chart">This will be our chart!</div>

3. Then you can create a TChart object in your Javascript file.

let chart = new TChart(chartId, chartWidth, chartHeight, data);

4. Parameters:

let data = [
  { label: "Jan", value: 24 },
  { label: "Feb", value: 124 },
  { label: "March", value: 65 },
  { label: "April", value: 98 },
  { label: "May", value: 65 },
  { label: "June", value: 129 },
  { label: "July", value: 198 },
  { label: "Aug", value: 256 },
  { label: "Sep", value: 77 },
];

 

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 Usage, please go to the official website.

Related Posts

Responsive-Multiple-Selection-Combo-Box-using-Bootstrap-3

Responsive Multiple Selection Combo Box using Bootstrap 3 | MagicSuggest

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support….

material-design-tab-vanilla-js

Material Design Inspired Tab UI In Vanilla JavaScript

Material Design tab vanilla JS implements a material design-inspired tab component with a click ripple effect and an active sliding menu cursor. Must Read: Responsive Accessible Tabs…

countdown-timer-app

Simple Countdown Timer App In jQuery

The countdown is a front-end application that allows starting the countdown with two options: set a target date or write the number of countdown days. A countdown…

html5-animate-js

Add Animation to Your HTML5 Pages | animate.js

animate.js is a small JavaScript library that provides a convenient way to apply CSS animations powered by Animate.css to DOM elements without writing any CSS. Easily apply…

vue-responsive-parallax-cards

Responsive Hover Parallax Cards With Vuejs

Vue Responsive Parallax Cards Hover Create response cards with a scroll-triggered parallax effect in your Vue.js application. Must Read: jQuery Sliding Display Your Content Like a Deck…

pure-css-tabs-responsive

Responsive Pure CSS Only Accordion & Tabs Component

Responsive pure CSS accordion tabs and tabs will automatically convert to a vertical accordion interface on mobile devices. Must Read: Create Dynamic Accordion Giving JSON Data Using…

Leave a Reply

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