@canvasjs/jquery-charts
v1.0.2
Published
CanvasJS jQuery Charts - Official
Downloads
438
Maintainers
canvasjsReadme
CanvasJS jQuery Charts - Official
CanvasJS jQuery Chart Plugin for creating interactive charts and graphs for your web applications. Library supports a wide range of chart types including bar, line, area, pie, doughnut charts, etc.
Important Links
- Official Website
- jQuery Integration Overview
- jQuery Charts Demo
- Download CanvasJS
- Chart Documentation
- CanvasJS Support Forum
Installing CanvasJS jQuery Charts
There are multiple ways to install CanvasJS jQuery Charts. You can directly add script-tag to include it from CDN or download it from official site or install it from NPM registry.
Install jQuery Charts via NPM
npm install --save @canvasjs/jquery-chartsSee npm documentation to know more about npm usage.
Using CanvasJS jQuery Charts via CDN
You can access CanvasJS jQuery Charts from our CDN directly. The plugin has a dependency on jQuery, and hence that has to be imported as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.canvasjs.com/ga/jquery.canvasjs.min.js"></script>Download from Official Site
You can download the jQuery plugin along with examples from our official download page. Save it in your project directory & add it in your application.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="jquery.canvasjs.min.js"></script>Usage
After CanvasJS jQuery Charts is installed, it can be imported into your project.
//Load jQuery and CanvasJS jQuery Charts
import $ from "jquery";
import "@canvasjs/jquery-charts";Define container for the chart.
<div id="chartContainer"></div>Create Chart
//Set the chart-options & create chart
var options = {
//Chart Options - Check https://canvasjs.com/docs/charts/chart-options/
title:{
text: "Basic Column Chart in jQuery"
},
data: [{
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}]
};
$("#chartContainer").CanvasJSChart(options);