Socket
Socket
Sign inDemoInstall

@canvasjs/jquery-stockcharts

Package Overview
Dependencies
2
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @canvasjs/jquery-stockcharts

CanvasJS jQuery StockCharts - Official


Version published
Maintainers
1
Created

Readme

Source



CanvasJS

CanvasJS jQuery StockCharts - Official

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.

jQuery Charts

Installing CanvasJS jQuery StockCharts

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.

Install jQuery StockChart via NPM
npm install --save @canvasjs/jquery-stockcharts

See npm documentation to know more about npm usage.

Using CanvasJS jQuery StockCharts via CDN

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>
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.stock.min.js"></script>

Usage

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";
Define container for the StockChart.
<div id="stockChartContainer"></div>
Create StockChart
    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);

jQuery StockChart
Interactive jQuery StockCharts

jQuery Interactive StockCharts


Keywords

FAQs

Last updated on 29 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc