jQuery Plugin for AnyChart jQuery plugin for AnyChart provides an easy way to use AnyChart JavaScript Charts with jQuery framework.

Table of Contents


Download and install

There are several ways to download/install AnyChart-jQuery.

  • Direct download

    Binaries are located in dist folder.

  • Package managers

    You can install AnyChart-jQuery using npm, bower or yarn:


npm install anychart-jquery
                            

bower install anychart-jquery
                            

yarn add anychart-jquery
                            

Quick start

Here is a basic sample that shows how to add a column chart:


<!doctype html>
<html>
<head>
    <!-- Add jQuery -->
    <script src="js/vendor/jquery-3.1.1.min.js"></script>
    <!-- Add anychart-bundle -->
    <script src="js/anychart-bundle.min.js"></script>
    <!-- Add AnyChart jQuery plugin -->
    <script src="js/anychart-jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 640px; height: 480px;"></div>
<script>
    // Render a column chart to a #container
    $('#container').anychart('column', [3, 1, 2]);
</script>
</body>
</html>
                                        

Examples Overview

See examples to learn how things work:

Asynchronous Data Loading
Choropleth Map
Gantt Chart
Multiple Charts
Simple Chart Update
Simple Dashboard
Stock Chart

API Overview

$(selector).anychart();

Returns an instance of a chart if it is rendered to a container. Returns null otherwise.


$(selector).anychart('line', [3, 1, 2]);
var chart = $(selector).anychart();
chart.background('red');
                            

$(selector).anychartStage();

Returns an instance of a stage if it was rendered to a container. Returns null otherwise.


$(selector).anychartStage(chart1, chart2, chart3);

var stage = $(selector).anychartStage();
stage.width(400);
                            

$(selector).anychart(type, var_args);

Renders type chart to a container.

type can be any of AnyChart chart types or stock, ganttProject, ganttResource.

var_args are data that is passed to the chart constructor.


$(selector).anychart('line', [3, 1, 2], [5, 4, 3]);
                            

Other use cases you can find in AnyChart jQuery examples folder


$(selector).anychart(type, geoData, var_args);

Renders a map to a container.

type can be: bubbleMap, choropleth, connector, markerMap, seatMap

geoData can be a string or an object with geo data.

var_args are chart data.


$(selector).anychart('choropleth', 'anychart.maps.australia', data);
                            

$(selector).anychartStage(var_args);

Renders preconfigured charts to a stage.

var_args are charts to be rendered to on a stage.


$(selector).anychartStage(chart1, chart2, chart3);
                            

License

© AnyChart.com - JavaScript charts. AnyChart jQuery plugin is released under the Apache 2.0 License.