JSFiddle - React, Tailwind, and code Playground
by souranil
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 760px; height: 300px;"></div>
JavaScript
Highcharts.setOptions({
lang: {
FullScreenButtonTitle: "View Larger Chart"
}
});
$(function () {
var chart;
$(document).ready(function () {
var colors = Highcharts.getOptions().colors,
categories = ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
name = 'AUM',
data = [{
y: 6.06,
color: '#B7C726',
drilldown: {
categories: ['Book1', 'Book2', 'Book3', 'Book4', 'Book5'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70, 10.31, 11.66, 0],
color: '#F3901D'
}]
} // drilldown
}, {
y: 7.9, //MA 10
color: '#B7C726',
drilldown: {
categories: ['FY09/10', 'FY10/11', 'FY11/12', 'FY12/13', 'FY13/14'],
series: [{
name: 'Page4',
data: [6.06, 7.90, 11.40],
color: '#74489D'
}, {
name: 'Page3',
data: [5.73, 7.26, 11.03],
color: '#B7C726'
}, {
name: 'Page2',
data: [5.71, 6.98, 10.73, 11.92],
color: '#7CCCBF'
}, {
name: 'Page1',
data: [5.58, 6.70,...