Custom Dynamic color for echarts - javascript

I am using echarts for my data visualization.... I got the solution for static data from here.. But in my case I have dynamic data and don't know how to make it work. The data items changes from time to time. It is not always 3 items like below. It could be any number.
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [
{
value: 120,
itemStyle: {color: 'blue'},
},
{
value: 200,
itemStyle: {color: 'red'},
},
{
value: 150,
itemStyle: {color: 'green'},
}
],
type: 'bar'
}],
graph: {
color: colorPalette
}
};
Someone have any idea about this.
Any help is appreciated. Thanks


You can have an array of colors predefined and randomly pop a color from that array, for each bar you have to draw:
var colors = [
"blue",
"red",
"yellow",
"green",
"purple"
];
function popRandomColor(){
var rand = Math.random();
var color = colors[Math.floor(rand*colors.length)];
colors.splice(Math.floor(rand*colors.length), 1);
return color;
}
Then call popRandomColor() everytime you need a color from the color bank.
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [
{
value: 120,
itemStyle: {color: popRandomColor()},
},
{
value: 200,
itemStyle: {color: popRandomColor()},
},
{
value: 150,
itemStyle: {color: popRandomColor()},
}
],
type: 'bar'
}],
graph: {
color: colorPalette
}
};


Is dynamic data with different color you want? check below
// put any color you want in Array colors
var colors = [
"blue",
"red",
"green"
];
// can be any length
var data = [{
category: 'cate1',
value: 120
}, {
category: 'cate2',
value: 200
}, {
category: 'cate3',
value: 150
}, {
category: 'cate4',
value: 135
}, {
category: 'cate5',
value: 54
}]
let category = [];
let seriesData = data.map((item, index) => {
category.push(item.category);
return {
value: item.value,
itemStyle: {
color: colors[index % colors.length]
}
}
});
var option = {
xAxis: {
type: 'category',
data: category
},
yAxis: {
type: 'value'
},
series: [{
data: seriesData,
type: 'bar'
}]
};


You can use this function to generate any number of colors and use it to assign these dynamic colors to your pie chart:
export const getColorArray = (num) => {
const result = [];
for (let i = 0; i < num; i += 1) {
const letters = '0123456789ABCDEF'.split('');
let color = '#';
for (let j = 0; j < 6; j += 1) {
color += letters[Math.floor(Math.random() * 16)];
}
result.push(color);
}
return result;
};
You can call this function like:
...
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [50, 150],
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
data: [
{ value: 40, name: "rose 1" },
{ value: 38, name: "rose 2" },
{ value: 32, name: "rose 3" },
{ value: 30, name: "rose 4" },
{ value: 28, name: "rose 5" },
{ value: 26, name: "rose 6" },
{ value: 22, name: "rose 7" },
{ value: 18, name: "rose 8" },
],
color: [...getColorArray(6)]
},
],
...

Related

How to reverse colors order for the first label?

I have a horizontal stacked bars with 3 labels with the same order for the colors. I would like to know how can I reverse the color order for the first label only so that it goes from dark blue to dark red and keep the same color flow for label 2 and 3.
https://jsfiddle.net/samwhite/s9yzuqd5/
var colors = ['#93003a', '#f4777f', '#ffb040', '#a5d5d8', '#00429d'];
var def_color = '#d3d3d3';
let labels = [
"In my organization, more emphasis is placed on quantity of work than on the quality of work",
"My Division/Office/Region is making real, meaningful progress on diversity, inclusion, and opportunity in our workplace",
"In my Division/Office/Region, I am given a fair opportunity to work on visible, career-enhancing assignments"
];
// Construct the chart
let chart = Highcharts.chart('container1_1', {
...
yAxis: {
title: { text: 'Response Rate' },
max: 100,
maxPadding: 0,
labels: {
format: '{value}%'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
...
xAxis: {
categories: labels,
labels: {
style: {
fontSize: '1em',
color: '#000',
width: 370,
float: 'left'
}
}
},
series: [{
name: 'Strongly Agree',
color: colors[4],
data: []
}, {
name: 'Agree',
color: colors[3],
data: []
}, {
name: 'Neither Agree nor Disagree',
color: colors[2],
data: []
}, {
name: 'Disagree',
color: colors[1],
data: []
}, {
name: 'Strongly Disagree',
color: colors[0],
data: []
}]
});

Added Color on each data set to work in the color scheme needed based on the index
you can see the reference here: https://api.highcharts.com/highcharts/series.bar.data
{
name: tooltip_titles[s],
color: colors[Math.abs(s - 4)],
y: dept_data["102"][4-s]
},
Old - https://jsfiddle.net/jouwsLn0/
New - https://jsfiddle.net/js1bfxe5/1/
series: [{
name: 'Strongly Agree',
color: colors[4],
data: []
}, {
name: 'Agree',
color: colors[3],
data: []
}, {
name: 'Neither Agree nor Disagree',
color: colors[2],
data: []
}, {
name: 'Disagree',
color: colors[1],
data: []
}, {
name: 'Strongly Disagree',
color: colors[0],
data: []
}]
});
$("#filterOrganization").change(function () {
$(this).find("option:selected")
.each(function () {
var optionValue = $(this).text();
let dept_data = data[optionValue];
chart.series.forEach((series, s) => {
console.log(s);
console.log(dept_data["102"][4-s]);
series.setData([
{
name: tooltip_titles[s],
color: colors[Math.abs(s - 4)],
y: dept_data["102"][4-s]
},
{
name: tooltip_titles[s],
color: colors[s],
y: dept_data["104"][4-s]
},
{
name: tooltip_titles[s],
color: colors[s],
y: dept_data["105"][4-s]
}]);
});
});
}).change();

Different color bar chart from eCharts

I was trying to create a different color bar. For Mon blue, Tue red, Wed green. Please help me how to write it. Line itemStyle: {normal: {color: 'blue','red', 'green'}}, did not work. The code comes from the echarts site.
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
itemStyle: {normal: {color: 'blue'}},
data: [120, 200, 150],
type: 'bar'
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>

This is my solution:
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [
{
value: 120,
itemStyle: {color: 'blue'},
},
{
value: 200,
itemStyle: {color: 'red'},
},
{
value: 150,
itemStyle: {color: 'green'},
}
],
type: 'bar'
}],
graph: {
color: colorPalette
}
};
https://plnkr.co/edit/vFK1qeMfMCXGx8Gdn1d8?p=preview

The top solution was not working for me. From their documentation is seems lineStyle now has two children elements you can leverage 'normal' and 'emphasis'.
I had to modify it like so to override the default colors:
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [
{
value: 120,
itemStyle: { normal: { color: 'blue' } },
},
{
value: 200,
itemStyle: { normal: { color: 'red' } },
},
{
value: 150,
itemStyle: { normal: { color: 'green' } },
}
],
type: 'bar'
}],
graph: {
color: colorPalette
}
};

My solution in June 2019 for needing different colors based on values: Create separate series for the different colors, and use a stacked chart. For example, I needed to create a graph with green bars for passing values and yellow bars for failing values. This was my implementation:
var data = {};
data.legendData = ['Sales','HR','Engineering'];
data.greenSeriesData = ['-',96.38,98.43];
data.yellowSeriesData = [44.23,'-','-'];
var option = {
title: {
text: '2019 Progress',
left: 'center'
},
xAxis: {
type: 'category',
data: data.legendData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: function (val) {
return (val) + '%';
}
}
},
series: [{
data: data.greenSeriesData,
type: 'bar',
stack: 'colorbyvalue',
label: {
show: true,
position: 'insideTop',
formatter: "{c}%",
color: '#000000'
},
barWidth: 50,
itemStyle: {
color: 'green'
}
},
{
data: data.yellowSeriesData,
type: 'bar',
stack: 'colorbyvalue',
label: {
show: true,
position: 'insideTop',
formatter: "{c}%",
color: '#000000'
},
barWidth: 50,
itemStyle: {
color: 'yellow'
}
}],
animation: false
};

you may have an array corresponding to the colors that you need for each day.
initially that could be empty and then you push the relevant color to it, depending on that day!
var cars1 = data.data_1;
var color_bar = [];
var text = "";
var i;
for (i = 0; i < cars1.length; i++)
{
if (cars1[i] < 20.35) {
color_bar.push("red");
}
else {
color_bar.push("yellow");
}
}
and the you call the relevant color for each data series...
yAxis: {
type: 'value'
},
series: [{
data:
[
{
value: data.data_1[0],
itemStyle: {color: color_bar[0]},
},{
value: data.data_1[1],
itemStyle: {color: color_bar[1]},
},{
value: data.data_1[2],
itemStyle: {color: color_bar[2]},
}],
Here I worked out an example based on value, but conditioning "day" should be ok.
I hope this helps mate.

After a day of research got this answer => add itemStyle with seriesIndex as params
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [ 120,200,150],
type: 'bar',
itemStyle: {
// HERE IS THE IMPORTANT PART
color: (seriesIndex) => yourCustomFunctionName(seriesIndex) // you will get access to array data passed and its index values
},
}],
graph: {
color: colorPalette
}
};

How can I add custom text to the bars in echarts and modify the color of the hovering ?

I am new using this library, and basically I would like to change the texts that are shown in the tooltip and in the label of the bars. I would also like to know how to modify the color of the bars to my liking.
To try to change the text, I am putting an array of test texts so that when I do a hovering on the bar, the text corresponds to the position of the data.
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
this is my code:
var chart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var text_toltip=[];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
chart.setOption({
backgroundColor: '#fff',
tooltip: {},
visualMap: {
max: 20,
color: ['#d94e5d','#eac736','#50a3ba']
},
xAxis3D: {
type: 'category',
data: hours
},
yAxis3D: {
type: 'category',
data: days
},
zAxis3D: {
type: 'value',
min: 1
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
environment: 'none',
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
texture: 'asset/pisa.hdr',
diffuseIntensity: 1
}
}
},
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
label: {
show: item[2] != 0
}
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
});
how can I do it?
https://plnkr.co/edit/LZnJdUDRQHdCRKnldWCL?p=preview

So if I understand your questions correctly:
to change visualMap.color property which specifies colors used for gradient
e.g.
visualMap: {
max: 20,
color: ['#00ff00','#0000ff'] // start and end colors for gradient
},
You can add name property to each of your axises
e.g.
yAxis3D: {
type: 'category',
data: days,
name: 'days'
},
to change text of your tooltips you add tooltip with formatter
e.g.
tooltip: {
formatter: 'my custom text and {a}, {b}, {c}, {d} and {e}'
},
alternatively formatter can be provided as a callback:
tooltip: {
formatter: function(params, ticket, callback) {
return "my text, value: " + params.value;
}
}
Using callback you can get detailed text from the server.
I also forked your plnkr: https://plnkr.co/edit/fpyhLHUZ2VAPdeQWnw4E?p=preview
UPDATE: https://plnkr.co/edit/JJMoWpZVhfyQOjdTYDvB?p=preview - this version uses your array of tooltips
Basically what you need in your case is params.dataIndex property:
tooltip: {
formatter: function(params) {
return " " + params.value + ", " + text_toltip[params.dataIndex];
}
},

Highcharts - drill down to multiple series

I have a parent chart that I need to drill down to a child chart with multiple series. Here is a toy example of what I would like to do. (I know this does not work)
Notice I'm trying to pass in an array of ids to display in the child chart.
Does anybody know a way to do this? If someone from Highcharts reads this, can this be added as a feature?
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
column : {
stacking : 'normal'
}
},
series: [{
name: 'Yearly Orders',
data: [{
name: 'Location 1',
y: 100,
drilldown: ['l1-wa', 'l1-wb']
}, {
name: 'Location 2',
y: 150,
drilldown: ['l2-wa', 'l2-wb']
}]
}],
drilldown: {
series: [{
name: 'Widget A',
type: 'line',
id: 'l1-wa',
data: [
{name: 'Qtr 1', y: 5},
{name: 'Qtr 2', y: 25},
{name: 'Qtr 3', y: 25},
{name: 'Qtr 4', y: 20}
]
},{
name: 'Widget B',
type: 'line',
id: 'l1-wb',
data: [
{name: 'Qtr 1', y: 10},
{name: 'Qtr 2', y: 5},
{name: 'Qtr 3', y: 5},
{name: 'Qtr 4', y: 5}
]
}, {
name: 'Widget A',
type: 'line',
id: 'l2-wa',
data: [
{name: 'Qtr 1', y: 25},
{name: 'Qtr 2', y: 5},
{name: 'Qtr 3', y: 5},
{name: 'Qtr 4', y: 15}
]
},{
name: 'Widget B',
type: 'line',
id: 'l2-wb',
data: [
{name: 'Qtr 1', y: 30},
{name: 'Qtr 2', y: 30},
{name: 'Qtr 3', y: 15},
{name: 'Qtr 4', y: 25}
]
}
]
}
})
});
Here is a JSFiddle of this drilling down to just one series http://jsfiddle.net/F7z3D/2/
EDIT - I extended Highcharts to give me some enhanced changes when drilling down. This is probably not the best code, but gets the point across. This allows for changing of the x and y axes, changing the subtitle, and multiple series.
$(function () {
(function (H) {
var noop = function () {},
defaultOptions = H.getOptions(),
each = H.each,
extend = H.extend,
format = H.format,
wrap = H.wrap,
Chart = H.Chart,
seriesTypes = H.seriesTypes,
PieSeries = seriesTypes.pie,
ColumnSeries = seriesTypes.column,
fireEvent = HighchartsAdapter.fireEvent,
inArray = HighchartsAdapter.inArray;
H.wrap(H.Chart.prototype, 'drillUp', function (proceed) {
var chart = this,
drilldownLevels = chart.drilldownLevels,
levelNumber = drilldownLevels[drilldownLevels.length - 1].levelNumber,
i = drilldownLevels.length,
chartSeries = chart.series,
seriesI = chartSeries.length,
level,
oldSeries,
newSeries,
oldExtremes,
addSeries = function (seriesOptions) {
var addedSeries;
each(chartSeries, function (series) {
if (series.userOptions === seriesOptions) {
addedSeries = series;
}
});
addedSeries = addedSeries || chart.addSeries(seriesOptions, false);
if (addedSeries.type === oldSeries.type && addedSeries.animateDrillupTo) {
addedSeries.animate = addedSeries.animateDrillupTo;
}
if (seriesOptions === level.seriesOptions) {
newSeries = addedSeries;
}
};
while (i--) {
level = drilldownLevels[i];
console.log(level.levelNumber);
console.log(levelNumber);
if (level.levelNumber === levelNumber) {
drilldownLevels.pop();
// Get the lower series by reference or id
oldSeries = level.lowerSeries;
if ($.isArray(oldSeries)) {
if (chart.series) {
while (chart.series.length > 0) {
chart.series[0].remove(false);
}
}
if (level.levelSubtitle) {
chart.setTitle(null, {text: level.levelSubtitle});
} else {
chart.setTitle(null, {
text: ''
});
}
if (chart.xAxis && level.levelXAxis) {
while (chart.xAxis.length > 0) {
chart.xAxis[0].remove(false);
}
}
if (chart.yAxis && level.levelYAxis) {
while (chart.yAxis.length > 0) {
chart.yAxis[0].remove(false);
}
}
if (level.levelYAxis) {
$.each(level.levelYAxis, function () {
chart.addAxis(this, false, false);
});
}
if (level.levelXAxis) {
$.each(level.levelXAxis, function () {
chart.addAxis(this, true, false);
});
}
$.each(level.levelSeriesOptions, function () {
chart.addSeries(this, false);
});
} else {
if (!oldSeries.chart) { // #2786
while (seriesI--) {
if (chartSeries[seriesI].options.id === level.lowerSeriesOptions.id) {
oldSeries = chartSeries[seriesI];
break;
}
}
}
oldSeries.xData = []; // Overcome problems with minRange (#2898)
each(level.levelSeriesOptions, addSeries);
fireEvent(chart, 'drillup', {
seriesOptions: level.seriesOptions
});
if (newSeries.type === oldSeries.type) {
newSeries.drilldownLevel = level;
newSeries.options.animation = chart.options.drilldown.animation;
if (oldSeries.animateDrillupFrom) {
oldSeries.animateDrillupFrom(level);
}
}
newSeries.levelNumber = levelNumber;
oldSeries.remove(false);
// Reset the zoom level of the upper series
if (newSeries.xAxis) {
oldExtremes = level.oldExtremes;
newSeries.xAxis.setExtremes(oldExtremes.xMin, oldExtremes.xMax, false);
newSeries.yAxis.setExtremes(oldExtremes.yMin, oldExtremes.yMax, false);
}
}
}
}
this.redraw();
if (this.drilldownLevels.length === 0) {
console.log('destroy');
this.drillUpButton = this.drillUpButton.destroy();
} else {
console.log('no destroy '+this.drilldownLevels.length);
this.drillUpButton.attr({
text: this.getDrilldownBackText()
})
.align();
}
});
H.wrap(H.Chart.prototype, 'addSingleSeriesAsDrilldown', function (proceed, point, ddOptions) {
if (!ddOptions.series) {
proceed.call(this, point, ddOptions);
} else {
var thisChart = this;
var oldSeries = point.series,
xAxis = oldSeries.xAxis,
yAxis = oldSeries.yAxis,
color = point.color || oldSeries.color,
pointIndex,
levelSeries = [],
levelSeriesOptions = [],
levelXAxis = [],
levelYAxis = [],
levelSubtitle,
level,
levelNumber;
levelNumber = oldSeries.levelNumber || 0;
// ddOptions.series[0] = extend({
// color: color
// }, ddOptions.series[0]);
// pointIndex = inArray(point, oldSeries.points);
// Record options for all current series
each(oldSeries.chart.series, function (series) {
if (series.xAxis === xAxis) {
levelSeries.push(series);
levelSeriesOptions.push(series.userOptions);
series.levelNumber = series.levelNumber || 0;
}
});
each(oldSeries.chart.xAxis, function (xAxis) {
levelXAxis.push(xAxis.userOptions);
});
each(oldSeries.chart.yAxis, function (yAxis) {
levelYAxis.push(yAxis.userOptions);
});
if(oldSeries.chart.subtitle && oldSeries.chart.subtitle.textStr){
levelSubtitle = oldSeries.chart.subtitle.textStr;
console.log(levelSubtitle);
}
// Add a record of properties for each drilldown level
level = {
levelNumber: levelNumber,
seriesOptions: oldSeries.userOptions,
levelSeriesOptions: levelSeriesOptions,
levelSeries: levelSeries,
levelXAxis: levelXAxis,
levelYAxis: levelYAxis,
levelSubtitle: levelSubtitle,
shapeArgs: point.shapeArgs,
bBox: point.graphic.getBBox(),
color: color,
lowerSeriesOptions: ddOptions,
pointOptions: oldSeries.options.data[pointIndex],
pointIndex: pointIndex,
oldExtremes: {
xMin: xAxis && xAxis.userMin,
xMax: xAxis && xAxis.userMax,
yMin: yAxis && yAxis.userMin,
yMax: yAxis && yAxis.userMax
}
};
// Generate and push it to a lookup array
if (!this.drilldownLevels) {
this.drilldownLevels = [];
}
this.drilldownLevels.push(level);
level.lowerSeries = [];
if (ddOptions.subtitle) {
this.setTitle(null, {text: ddOptions.subtitle});
}else{
this.setTitle(null, {text: ''});
}
if (this.xAxis && ddOptions.xAxis) {
while (this.xAxis.length > 0) {
this.xAxis[0].remove(false);
}
}
if (this.yAxis && ddOptions.yAxis) {
while (this.yAxis.length > 0) {
this.yAxis[0].remove(false);
}
}
if (ddOptions.yAxis) {
if ($.isArray(ddOptions.yAxis)) {
$.each(ddOptions.yAxis, function () {
thisChart.addAxis(this, false, false);
});
} else {
thisChart.addAxis(ddOptions.yAxis, false, false);
}
}
if (ddOptions.xAxis) {
if ($.isArray(ddOptions.xAxis)) {
$.each(ddOptions.xAxis, function () {
thisChart.addAxis(this, true, false);
});
} else {
thisChart.addAxis(ddOptions.xAxis, true, false);
}
}
$.each(ddOptions.series, function () {
var newSeries = thisChart.addSeries(this, true);
level.lowerSeries.push(newSeries);
newSeries.levelNumber = levelNumber + 1;
// if (xAxis) {
// xAxis.oldPos = xAxis.pos;
// xAxis.userMin = xAxis.userMax = null;
// yAxis.userMin = yAxis.userMax = null;
// }
// // Run fancy cross-animation on supported and equal types
// if (oldSeries.type === newSeries.type) {
// newSeries.animate = newSeries.animateDrilldown || noop;
// newSeries.options.animation = true;
// }
});
}
});
H.wrap(H.Point.prototype, 'doDrilldown', function (proceed, _holdRedraw) {
if (!$.isPlainObject(this.drilldown)) {
proceed.call(this, _holdRedraw);
} else {
var ddChartConfig = this.drilldown;
console.log(ddChartConfig);
var ddSeries = ddChartConfig.series;
var series = this.series;
var chart = series.chart;
var drilldown = chart.options.drilldown;
var seriesObjs = [];
for (var i = 0; i < ddSeries.length; i++) {
if (!$.isPlainObject(ddSeries[i])) {
console.log(ddSeries[i]);
var j = (drilldown.series || []).length;
var seriesObj = null;
while (j-- && !seriesObj) {
if (drilldown.series[j].id === ddSeries[i]) {
seriesObj = drilldown.series[j];
}
}
if (seriesObj) {
seriesObjs.push(seriesObj);
}
} else {
seriesObjs.push(ddSeries[i]);
}
}
ddChartConfig.series = seriesObjs;
ddSeries = ddChartConfig.series;
// Fire the event. If seriesOptions is undefined, the implementer can check for
// seriesOptions, and call addSeriesAsDrilldown async if necessary.
HighchartsAdapter.fireEvent(chart, 'drilldown', {
point: this,
seriesOptions: ddChartConfig
});
if (ddChartConfig) {
if (_holdRedraw) {
chart.addSingleSeriesAsDrilldown(this, ddChartConfig);
} else {
chart.addSeriesAsDrilldown(this, ddChartConfig);
}
}
}
});
}(Highcharts));
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Yearly Orders',
data: [{
name: 'Location 1',
y: 100,
drilldown: {
series: ['l1-wa', 'l2-wa'],
subtitle: "subtitle",
xAxis: {
title: {
text: 'X Axis'
}
},
yAxis: {
title: {
text: 'Y Axis'
}
}
}
}, {
name: 'Location 2',
y: 150 //,
// drilldown: 'l2-wa'
}]
}],
drilldown: {
series: [{
name: 'Widget A',
type: 'column',
id: 'l1-wa',
data: [{
name: 'Qtr 1',
y: 5,
drilldown: {series: ['l2-wb'], xAxis: {
},
yAxis: {
}}
}, {
name: 'Qtr 2',
y: 25
}, {
name: 'Qtr 3',
y: 25
}, {
name: 'Qtr 4',
y: 20
}]
}, {
name: 'Widget B',
type: 'line',
id: 'l1-wb',
data: [{
name: 'Qtr 1',
y: 10
}, {
name: 'Qtr 2',
y: 5
}, {
name: 'Qtr 3',
y: 5
}, {
name: 'Qtr 4',
y: 5
}]
}, {
name: 'Widget A',
type: 'column',
id: 'l2-wa',
data: [{
name: 'Qtr 1',
y: 25
}, {
name: 'Qtr 2',
y: 5
}, {
name: 'Qtr 3',
y: 5
}, {
name: 'Qtr 4',
y: 15
}]
}, {
name: 'Widget B',
type: 'pie',
id: 'l2-wb',
data: [{
name: 'Qtr 1',
y: 30
}, {
name: 'Qtr 2',
y: 30
}, {
name: 'Qtr 3',
y: 15
}, {
name: 'Qtr 4',
y: 25
}]
}
]
}
})
});
Here is a JSFIDDLE http://jsfiddle.net/skTHx/10/

You can refer this demo: JSFIDDLE
code:
$(function () {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = ['Browser brands'],
data = [{
y: 55.11,
color: colors[0],
drilldown: {
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
series: [{
type: 'spline',
name: 'MSIE versions 2000',
data: [10.85, 7.35, 33.06, 2.81],
color: colors[0]
},{
type: 'spline',
name: 'MSIE versions 2010',
data: [1, 5, 10, 15],
color: colors[0]
}]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [0.20, 0.83, 1.58, 13.12, 5.43],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 4.1'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
data: [ 0.12, 0.37, 1.65],
color: colors[4]
}
}];
function setChart(name, categories, data, color, type) {
var len = chart.series.length;
chart.xAxis[0].setCategories(categories);
for(var i = 0; i < len; i++){
console.log(chart.series.length);
chart.series[0].remove();
}
console.log('a');
if(data.series){
for(var i = 0; i < data.series.length; i ++ ){
chart.addSeries({
name: data.series[i].name,
data: data.series[i].data,
type: data.series[i].type,
color: data.series[i].color || 'white'
});
}
} else {
chart.addSeries({
name: name,
data: data,
type: type,
color: color || 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(null, drilldown.categories, drilldown, drilldown.type);
} else { // restore
setChart(name, categories, data, drilldown.type);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
},
spline: {
cursor: 'pointer',
point: {
events: {
click: function() {
setChart(name, categories, data, 'column');
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y + '%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
});

Found a neat solution here
Uses a drillup option,
Highcharts.setOptions({
lang: {
drillUpText: '<< Go Back {series.name}'
}
});

A workaround for a drillup button in combination with the setChart() solution, can be to add a hyperlink (e.g. in a subtitle). Then give the original data to setChart()
$(document).on('click', '#drillup', function () {
var data = {categories: categories, series: series};
setChart('new title', categories, data, chart.type);
});

Sample code for multiple series drill-down column and line charts..
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
// Create the chart
// type to line for line chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
style: {
color: 'white',
textShadow: '0 0 2px black, 0 0 2px black'
}
},
stacking: 'normal'
}
},
series: [{
name: 'Things',
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
name: 'Things3',
stack: 1,
type: 'line',
data: [{
name: 'Animals',
y: 8,
drilldown: 'animals3'
}, {
name: 'Fruits',
y: 7,
drilldown: 'fruits3'
}, {
name: 'Cars',
y: 10,
drilldown: 'cars3'
}]
}],
drilldown: {
activeDataLabelStyle: {
color: 'white',
textShadow: '0 0 2px black, 0 0 2px black'
},
series: [{
id: 'animals',
name: 'Animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
name: 'Fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
name: 'Cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
},{
id: 'animals3',
name: 'Animals3',
type: 'line',
stack: 1,
data: [
['Cats', 2],
['Dogs', 3],
['Cows', 1],
['Sheep', 1],
['Pigs', 1]
]
}, {
id: 'fruits3',
name: 'Fruits3',
type: 'line',
stack: 1,
data: [
['Apples', 4],
['Oranges', 3]
]
}, {
id: 'cars3',
name: 'Cars3',
type: 'line',
stack: 1,
data: [
['Toyota', 4],
['Opel', 3],
['Volkswagen', 3]
]
}]
}
})
});
</script>

How to create a multi y-axis chart with drill down in Highcharts

http://jsfiddle.net/cgelinas78/pLDeq/54/
A few things...
Why aren't the dollar amounts showing up on the left y-axis?
When one drills down on the 1st column and then comes back - why does the "Budget" series turn black?
Here's my code:
$(function(){
function setChartColumn(name, categories, data, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
while(chart.series.length>0)
chart.series[0].remove();
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: (i == 0 ? 'column' : 'spline'),
name: name[i],
data: data[i],
color: colors[i]
});
}
}
function setChart(name, categories, data, color, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
} else {
for(var i = 0; i< chart.series.length; i++){
chart.series[i].remove();
}
}
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: type,
name: name,
stacking: 'normal',
data: data[i],
color: color || 'white'
});
}
}
var colors = Highcharts.getOptions().colors;
var categories = ['Jan','Feb','Mar','Apr','May','Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
name = 'Expenses',
name2 = 'Budget',
data = [
{
y:100,
drilldown: {
name:'Marketing',
type:'column',
categories:['Silverline','Google','CNN'],
data:[
{name:'Recommedation',y:15},
{name: 'Legal Fees', y:50},
{name: 'Click Ads', y:35}
],
color: colors[0]
}
},
{
y:402,
drilldown: {
name:'Expenses',
type:'column',
categories:['1','2','3','4'],
data:[
{name:'Recommedation',y:67},
{name:'Recommedation',y:34},
{name:'Recommedation',y:1},
{name:'Recommedation',y:11}
],
color: colors[0]
}
},
{
y:343,
drilldown: {
name:'Misc',
type:'column',
categories:['A', 'B', 'C'],
data:[
{name:'Recommendation',y:82},
{name:'Area',y:5},
{name:'Observation',y:6}
],
color: colors[0]
}
},
{
y:175,
drilldown: {
name:'A',
type:'column',
categories:['B','C','D'],
data:[
{name:'Recommendation',y:17},
{name:'Recommendation',y:20},
{name:'Recommendation',y:50}
],
color: colors[0]
}
},
{
y:229,
drilldown: {
name:'Expense 1',
type:'column',
categories:['Category 1'],
data:[
{name:'Recommendation',y:15},
{name:'Observation',y:2}],
color: colors[0]
}
},
{
y:533
},
{y:166},
{y:445},
{y:312},
{y:310},
{y:230},
{y:40}],
data2 = [1000,990,851,805,729,699, 650, 550, 450, 350, 250, 150, 50];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: '2013 Mizuho Budget'
},
subtitle: {
text: 'Click for more details and click to return.'
},
xAxis: [{
categories: categories
}],
yAxis: [{
labels: {
formatter: function(){
return '$' + this.value;
},
style: { color: '#89A54E' }
},
title: {
text: 'Budget',
style: { color: '#89A54E' }
},
opposite: true
},
{ // Secondary yAxis
gridLineWidth: 0,
labels: {
formatter: function() {
return '$' + this.value;
},
style: {color: '#4572A7'}
},
title: {
text: 'Expenses',
style: {color: '#4572A7'}
}
}],
plotOptions: {
spline: { showInLegend: true},
column: {
cursor: 'pointer',
point: {
events: {
click:
function() {
var drilldown = this.drilldown;
if (drilldown) {
setChart([drilldown.name, drilldown.name1, drilldown.name2, drilldown.name3, drilldown.name4, drilldown.name5], drilldown.categories, [drilldown.data, drilldown.data1, drilldown.data2, drilldown.data3, drilldown.data4, drilldown.data5], drilldown.color, [drilldown.type]);
} else {
setChartColumn([name,name2], categories, [data,data2], ['column','column']);
}
}
}
},
showInLegend: true,
dataLabels: {
enabled: false,
color: colors[0],
style: { fontWeight: 'bold' },
formatter: function() {
return '$' + this.y;
}
}
}
},
tooltip: { shared: true },
credits:{ enabled:false },
legend: { backgroundColor: '#FFFFFF' },
series: [{
name: name,
color: '#4572A7',
type: 'column',
data: data
},
{
name: name2,
color: '#89A54E',
type: 'spline',
data: data2
}]
});
});

1) You don't have either of your series assigned to use the 2nd axis. Add yAxis:1 to one of your series and it will show up.
2) You are setting the color of the line originally to #89A54E and then in setChart you set it to color[i]
3) Look at what you are passing into setChart:
setChart([drilldown.name, drilldown.name1, drilldown.name2, drilldown.name3, drilldown.name4, drilldown.name5], drilldown.categories, [drilldown.data, drilldown.data1, drilldown.data2, drilldown.data3, drilldown.data4, drilldown.data5], drilldown.color, [drilldown.type]);
SetChart adds a series for each of the 3rd parameter: [drilldown.data, drilldown.data1, drilldown.data2, drilldown.data3, drilldown.data4, drilldown.data5]

Categories