How to use anychart - 9 common examples
To help you get started, we’ve selected a few anychart examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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);import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'
let data = anychart.data.set([
{'id': 'AU.WA', 'value': 300},
{'id': 'AU.JB', 'value': 230},
{'id': 'AU.NS', 'value': 240},
{'id': 'AU.VI', 'value': 275},
{'id': 'AU.NT', 'value': 130},
{'id': 'AU.TS', 'value': 190},
{'id': 'AU.CT', 'value': 100},
{'id': 'AU.SA', 'value': 305},
{'id': 'AU.QL', 'value': 190}
]);
// please do not forget to include the map to your html file ( section)
//
ReactDOM.render(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);
forthPlot.spline(orclDataTable.mapAs({'value': 4})).name('ORCL').tooltip(null);
forthPlot.stepLine(cscoDataTable.mapAs({'value': 4})).name('CSCO').tooltip(null);
chart.scroller().area(msftDataTable.mapAs({'value': 4}));
chart.selectRange('2005-01-03', '2005-11-20');import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'
const data = anychart.data.set([
['p1', 5, 4],
['p2', 6, 2],
['p3', 3, 7],
['p4', 1, 5]
]);
// Also you can set data as array or object
// As array
/*const data = [
['p1', 5, 4],
['p2', 6, 2],
['p3', 3, 7],
['p4', 1, 5]
];*/// 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);
forthPlot.spline(orclDataTable.mapAs({'value': 4})).name('ORCL').tooltip(null);
forthPlot.stepLine(cscoDataTable.mapAs({'value': 4})).name('CSCO').tooltip(null);
chart.scroller().area(msftDataTable.mapAs({'value': 4}));
chart.selectRange('2005-01-03', '2005-11-20');
ReactDOM.render(import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'
let count = 50;
let rawData = [];
for (let i = 0; i < count; i++) {
rawData.push([i, Math.random() * 10])
}
let dataSet = anychart.data.set(rawData);
ReactDOM.render(
, document.getElementById('root'));
let counter = count;
setInterval(function() {
dataSet.remove(0);
dataSet.append([counter++, Math.random() * 10])
}, 500);import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'
let stage = anychart.graphics.create();
let chart1 = anychart.line([1, 2, 3]);
chart1.bounds(0, 0, '100%', '50%');
let chart2 = anychart.column();
chart2.column([3, 2, 1]);
chart2.line([3, 5, 6]);
chart2.bounds(0, '50%', '100%', '50%');
ReactDOM.render(
, document.getElementById('root'));import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'
let stage = anychart.graphics.create();
let chart1 = anychart.line([1, 2, 3]);
chart1.bounds(0, 0, '100%', '50%');
let chart2 = anychart.column();
chart2.column([3, 2, 1]);
chart2.line([3, 5, 6]);
chart2.bounds(0, '50%', '100%', '50%');
ReactDOM.render(
, document.getElementById('root'));import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'
let stage = anychart.graphics.create();
let chart1 = anychart.line([1, 2, 3]);
chart1.bounds(0, 0, '100%', '50%');
let chart2 = anychart.column();
chart2.column([3, 2, 1]);
chart2.line([3, 5, 6]);
chart2.bounds(0, '50%', '100%', '50%');
ReactDOM.render(
, document.getElementById('root'));anychart
AnyChart is a lightweight and robust JavaScript charting solution with great API and documentation. The chart types and unique features are numerous, and the library works easily with any development stack.
