CanvasJS jQuery StockChart for creating interactive charts & graphs for your web pages. Library supports a wide range of chart types including line, area, column, candlestick, etc.
- Official Website
- jQuery StockCharts Demo
- Download CanvasJS
- jQuery StockChart Integration
- StockChart Documentation
-
StockChart Support Forum
There are multiple ways to install CanvasJS jQuery StockCharts. You can directly add script-tag to include it from CDN or download it from official site or install it from NPM registry.
npm install --save @canvasjs/jquery-stockcharts
See npm documentation to know more about npm usage.
You can access CanvasJS jQuery StockCharts 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.stock.min.js"></script>
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.stock.min.js"></script>
After CanvasJS jQuery StockCharts is installed, it can be imported into your project.
//Load jQuery and CanvasJS jQuery StockCharts
import $ from "jquery";
import "@canvasjs/jquery-charts";
<div id="stockChartContainer"></div>
var stockChartOptions = {
title: {
text: "CanvasJS StockChart"
},
charts: [{
data: [{
type: "line",
dataPoints: [
{ x: new Date("2018-01-01"), y: 71 },
{ x: new Date("2018-02-01"), y: 55 },
{ x: new Date("2018-03-01"), y: 50 },
{ x: new Date("2018-04-01"), y: 65 },
{ x: new Date("2018-05-01"), y: 95 },
{ x: new Date("2018-06-01"), y: 68 },
{ x: new Date("2018-07-01"), y: 28 },
{ x: new Date("2018-08-01"), y: 34 },
{ x: new Date("2018-09-01"), y: 14 },
{ x: new Date("2018-10-01"), y: 71 },
{ x: new Date("2018-11-01"), y: 55 },
{ x: new Date("2018-12-01"), y: 50 },
{ x: new Date("2019-01-01"), y: 34 },
{ x: new Date("2019-02-01"), y: 50 },
{ x: new Date("2019-03-01"), y: 50 },
{ x: new Date("2019-04-01"), y: 95 },
{ x: new Date("2019-05-01"), y: 68 },
{ x: new Date("2019-06-01"), y: 28 },
{ x: new Date("2019-07-01"), y: 34 },
{ x: new Date("2019-08-01"), y: 65 },
{ x: new Date("2019-09-01"), y: 55 },
{ x: new Date("2019-10-01"), y: 71 },
{ x: new Date("2019-11-01"), y: 55 },
{ x: new Date("2019-12-01"), y: 50 }
]
}]
}],
navigator: {
slider: {
minimum: new Date("2018-07-01"),
maximum: new Date("2019-06-30")
}
}
};
$("#stockChartContainer").CanvasJSStockChart(stockChartOptions);
