To help you get started, we've collected the most common ways that anychart is being used within popular public projects.

AnyChart / AnyChart-React / examples / src / stock.js View on Github

import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'

// To use data for stock please include next files in your html-file (in  section)
// 
// 
// 
// 
// all of this data are presented in assets directory of plugin repository

var msftDataTable = anychart.data.table();
msftDataTable.addData(window.get_msft_daily_short_data());
var orclDataTable = anychart.data.table();
orclDataTable.addData(window.get_orcl_daily_short_data());
var cscoDataTable = anychart.data.table();
cscoDataTable.addData(window.get_csco_daily_short_data());
var ibmDataTable = anychart.data.table();
ibmDataTable.addData(window.get_ibm_daily_short_data());
var chart = anychart.stock();
var firstPlot = chart.plot(0);
firstPlot.area(msftDataTable.mapAs({'value': 4})).name('MSFT');
var secondPlot = chart.plot(1);
secondPlot.splineArea(orclDataTable.mapAs({'value': 4})).fill('#1976d2 0.65').stroke('1.5 #1976d2').name('ORCL');
var thirdPlot = chart.plot(2);
thirdPlot.stepArea(cscoDataTable.mapAs({'value': 4})).fill('#ef6c00 0.65').stroke('1.5 #ef6c00').name('CSCO');
var forthPlot = chart.plot(3);
forthPlot.line(msftDataTable.mapAs({'value': 4})).name('MSFT').tooltip(null);

View more ways to use anychart

AnyChart Data Visualization Framework

AnyChart is a flexible JavaScript (HTML5, SVG, VML) charting framework that fits any solution in need of data visualization.

Table of Contents

• Download and install
• Getting started
• Plugins
• Using AnyChart with TypeScript
• Using AnyChart with ECMAScript 6
• Technical Integrations
• Contribution guide
• Build and debug
• Module system
• Package directory
• Contacts
• Links
• License

Download and install

There are several ways to download/install AnyChart.

Direct download

All binaries are located in dist folder.

CDN

If you don't want to download and host AnyChart yourself, you can include it from the AnyChart CDN (Content Delivery Network): https://www.anychart.com/download/cdn

Package managers

You can install AnyChart using npm, bower or yarn:

• npm install anychart
• bower install anychart
• yarn add anychart

Getting started

The fastest way to start with AnyChart is to include framework into a webpage and write some code. Look at this simple HTML snippet below:

<div style="width: 500px; height: 400px;" id="container"></div>

Step by step quick start guides

• AnyChart Quick Start
• AnyStock Quick Start
• AnyMap Quick Start
• AnyGantt Quick Start

Plugins

AnyChart provides wide variety of plugins for different kind of technologies, which includes:

• AngularJS v1.x
• AngularJS v2.x
• React
• Ember
• Meteor
• NodeJS
• Qlik
• jQuery

Using AnyChart with TypeScript

You can use AnyChart in your TypeScript projects - we have definition file for our library which you can find in distribution folder. Please, take a look at webpack and typescript integration example for more details.

Using AnyChart with ECMAScript 6

You can use AnyChart in your ECMAScript 6 projects over two ways:

Plain ECMAScript 6

To add AnyChart on a page use `

For more details, take a look at [AnyChart ES6](https://github.com/anychart-integrations/anychart-es6-example) example.

#### Bundling tools and Module Loaders
You can use AnyChart with any bundling tool or module loader such as WebPack, Browserify, Require.js and others.
For more details, take a look at [AnyChart Webpack](https://github.com/anychart-integrations/anychart-es6-webpack) example.

## Technical Integrations

AnyChart can run on any platform and with any database. [These samples](https://www.anychart.com/integrations/) were created to demonstrate how AnyChart can be easily integrated into your environment.
All examples are distributed under an Apache 2.0 License and can be customized to your application. If you are interested in a particular integration not listed here, please [contact us](https://www.anychart.com/support/).
<table>
<tbody>
<tr>
  <td><a href="https://www.anychart.com/integrations/asp-net-c-sharp-mysql-template/">ASP.NET, C# and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/asp-net-vb-mysql-template/">ASP.NET, VB.NET and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/asp-net-signalr-mysql-template/">ASP.NET, C#, SignalR and MySQL</a></td>
</tr>
<tr>
  <td><a href="https://www.anychart.com/integrations/golang-revel-mysql-template/">Go, Revel and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/golang-http-mysql-template/">Go and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/java-jsp-jdbc-mysql-template/">Java Servlets, Maven, JDBC, JSP and MySQL</a></td>
</tr>
<tr>
  <td><a href="https://www.anychart.com/integrations/nodejs-socket-io-mongodb-template/">NodeJS and MongoDB using socket.io</a></td>
  <td><a href="https://www.anychart.com/integrations/java-spring-hibernate-mysql-template/">Java Spring, Maven, Hibernate and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/julia-http-mysql-template/">Julia and MySQL</a></td>
</tr>
<tr>
  <td><a href="https://www.anychart.com/integrations/nodejs-express-mongodb-template/">NodeJS Express, Jade and MongoDB</a></td>
  <td><a href="https://www.anychart.com/integrations/php-symfony-mysql-template/">PHP, Symfony and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/php-laravel-mysql-template/">PHP, Laravel and MySQL</a></td>
</tr>
<tr>
  <td><a href="https://www.anychart.com/integrations/php-slim-mysql-template/">PHP, Slim and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/perl-catalyst-basic-template/">Perl, Catalyst Web Framework and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/python-flask-mysql-template/">Python, Flask and MySQL</a></td>
</tr>
<tr>
  <td><a href="https://www.anychart.com/integrations/python-django-mysql-template/">Python, Django and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/r-shiny-mysql-template/">R, Shiny and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/ruby-sinatra-mysql-template/">Ruby, Sinatra and MySQL</a></td>
</tr>
<tr>
  <td><a href="https://www.anychart.com/integrations/ruby-rails-mysql-template/">Ruby on Rails and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/scala-akka-http-mysql-template/">Scala, Akka and MySQL</a></td>
  <td><a href="https://www.anychart.com/integrations/scala-play-mysql-template/">Scala, Play and MySQL</a></td>
</tr>
</tbody>
</table>

## Contribution guide

To contribute to AnyChart project please:

* Fork AnyChart repository.
* Create a branch from the `develop` branch.
* Make any changes you want to contribute.
* Create a pull request against the `develop` branch.

[GitHub documentation: Forking repositories](https://help.github.com/articles/fork-a-repo/).  
[GitHub documentation: Collaborating using pull requests](https://help.github.com/categories/collaborating-with-issues-and-pull-requests/).

Please, note:  
1. AnyChart bears no responsibility for the code written by third-party developers until pull request is accepted.  
2. After pull request is accepted the author of pull request sign over all rights to the code to AnyChart.  

## Build and debug

#### Dependencies

AnyChart uses several third-party libraries and tools to work with JavaScript and CSS.

* [GraphicsJS](https://www.graphicsjs.org/) - High-performance SVG/VML drawing library.
* [Google Closure Library](https://github.com/google/closure-library) - powerful, low-level JavaScript library.
* [Google Closure Compiler](https://github.com/google/closure-compiler) - compiles JavaScript code to better JavaScript.
* [lesscpy](https://github.com/lesscpy/lesscpy) - Python LESS Compiler. Used to compile and minify AnyChart UI css.

#### Building options

`build.py` python script is used to work with AnyChart project. You need to install python to use it. 

To see all available options of the build script use `-h` or `--help` command:

`./build.py -h`.

To see command options use:

`./build.py  -h`

To install all dependencies use the `deps` command:

`./build.py deps`.

After running this command you can compile the project using the `compile` command:

`./build.py compile`

This compiles production version of **anychart-bundle** and **all** modules and puts them into the `out` folder. You can read more about modules in our [Modules](https://docs.anychart.com/Quick_Start/Modules) article.

To create a dev build for the debug purposes use `-d` or `--develop` option:

`./build.py compile -d`

The `-df` option generates **property renaming report**, **variable renaming report**, and **source map location mapping** files:

`./build.py compile -df`

Source map maps minified code to source code. Read more about using [source maps in Chrome](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) or [source maps in Firefox](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map).

## Module system
AnyChart since v8.0.0 is structured as a modules, so you can use only what you need. Please look at our article [Modules](https://docs.anychart.com/Quick_Start/Modules) to start working with modules.

## Package directory

├── css │ ├── anychart.less │ ... ├── dist │ ├── json-schema.json │ ├── xml-schema.xsd │ ... ├── src │ ├── charts │ ├── core │ ├── modules │ ├── themes │ ... │ README.md │ LICENSE │ ...

#### css

The `css` folder contains  **.less** CSS files that are compiled into one **.css** file.

#### src

The `src` folder contains AnyChart source code files organized according to the project structure. For example:

* `charts` subfolder contains chart classes
* `core` subfolder contains core classes
* `modules` subfolder contains modules 
* `themes` contains themes

#### dist

The `dist` folder contains binaries and JSON/XML Schemas.

## Contacts

* Web: [www.anychart.com](https://www.anychart.com)
* Email: [contact@anychart.com](mailto:contact@anychart.com)
* Twitter: [anychart](https://twitter.com/anychart)
* Facebook: [AnyCharts](https://www.facebook.com/AnyCharts)
* LinkedIn: [anychart](https://www.linkedin.com/company/anychart)

## Links

* [AnyChart Website](https://www.anychart.com)
* [Download AnyChart](https://www.anychart.com/download/)
* [AnyChart Licensing](https://www.anychart.com/buy/)
* [AnyChart Support](https://www.anychart.com/support/)
* [Report Issues](https://github.com/AnyChart/anychart/issues)
* [AnyChart Playground](https://playground.anychart.com)
* [AnyChart Documentation](https://docs.anychart.com)
* [AnyChart API Reference](https://api.anychart.com)
* [AnyChart Sample Solutions](https://www.anychart.com/solutions/)
* [AnyChart Integrations](https://www.anychart.com/technical-integrations/samples/)

[<img width="134px" src="https://cdn.anychart.com/images/Browserstack-logo.png">](https://www.browserstack.com/)

## License

[© AnyChart.com - JavaScript charts](https://www.anychart.com). All rights reserved.
[![](https://ga-beacon.appspot.com/UA-228820-4/AnyChart?pixel&amp;useReferer)](https://github.com/igrigorik/ga-beacon)