Related
I'm using highcharts and have to divide a series, so the mouse over event focus on the correct data. But, when I divide the data, the space between horizontal series changes.
Highcharts one serie - before divide the data
Highcharts multiple series - after divide the data
I also have the two playgrounds on JSFiddle:
https://jsfiddle.net/6g09hjyk/
Highcharts.chart('container', {
chart: {
backgroundColor: 'transparent'
},
credits: false,
navigation: {
buttonOptions: {
theme: {
fill: 'white',
padding: 5,
stroke: 'none'
}
}
},
title: {
text: null
},
subtitle: {
},
xAxis: [{
visible: true,
offset: 0.1,
},
{
visible: false
}],
plotOptions: {
series: {
pointWidth: -5
}
},
yAxis: [{
visible: true,
reversed: true,
gridLineWidth: 0,
title: {
text: 'MD (m)',
style: {
fontSize: '10px'
}
},
min: 2000,
max: 6500
},
{
opposite: true,
gridLineWidth: 0,
title: {
text: null,
}
}
],
legend: {
enabled: false
},
series: [
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2001, 2057, 3455],
[2002, 2059, 5499],
[2003, 2055, 5838],
[2004, 2058, 6028],
[2007, 2058, 6028],
[2008, 2055, 5838],
[2009, 2059, 5499],
[2010, 2057, 3455]
]
}
]
});
https://jsfiddle.net/6g09hjyk/1/
Highcharts.chart('container', {
chart: {
backgroundColor: 'transparent'
},
credits: false,
navigation: {
buttonOptions: {
theme: {
fill: 'white',
padding: 5,
stroke: 'none'
}
}
},
title: {
text: null
},
subtitle: {
},
xAxis: [{
visible: true,
offset: 0.1,
},
{
visible: false
}],
plotOptions: {
series: {
pointWidth: -5
}
},
yAxis: [{
visible: true,
reversed: true,
gridLineWidth: 0,
title: {
text: 'MD (m)',
style: {
fontSize: '10px'
}
},
min: 2000,
max: 6500
},
{
opposite: true,
gridLineWidth: 0,
title: {
text: null,
}
}
],
legend: {
enabled: false
},
series: [
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2001, 2057, 3455],
[2010, 2057, 3455]
]
},
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2002, 2059, 5499],
[2009, 2059, 5499]]
},
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2003, 2055, 5838],
[2008, 2055, 5838],
]
},
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2004, 2058, 6028],
[2007, 2058, 6028],
]
}
]
});
Can anyone help me?
You need to disable the grouping feature:
plotOptions: {
series: {
...,
grouping: false
}
}
Live demo: https://jsfiddle.net/BlackLabel/rta5xs81/
API Reference: https://api.highcharts.com/highcharts/plotOptions.columnrange.grouping
I want to make the graph start at 0 (as shown in the picture) and have the string formatted according to the regular expression replace(/\B(?=(\d{3})+(?!\d))/g, " ") but all my attempts are unsuccessful.
chartOptions: {
colors: ['#3DC3FB', '#FF5252', '#D2F449', '#179877'],
title: {
text: "",
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
if (this.x > 0) {
return this.x;
} else return false;
},
},
plotOptions: {
series: {
enableMouseTracking: false,
states: {
hover: {
enabled: false
},
normal: {
animation: false
},
select: {
enabled: false
}
}
},
},
xAxis: {
gridLineWidth: 1,
tickmarkPlacement: 'on',
lineColor: "#A4A4A4",
min: 0,
categories: [null, "10 лет"],
top: 10,
right: -100,
title: {
style: {
color: "#A4A4A4"
}
},
},
yAxis: {
gridLineWidth: 0,
tickColor: 'undefined',
tickLength: 5,
tickWidth: 1,
tickPosition: 'outside',
lineWidth: 1,
lineColor: '#A4A4A4',
min: 3,
title: {
text: "Доход от инвестиций",
margin: 10,
align: "low",
style: {
color: "#A4A4A4"
},
y: -50,
},
labels: {
enabled: false,
},
},
legend: {enabled: false},
marker: {
enabled: false,
symbol: 'circle',
radius: 12,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
},
series: [
{
type: 'line',
name: "ВДело",
data: [0, 1100],
dataLabels: {
x: -100,
y: 5,
enabled: true,
// useHTML: true,
format: `{point.y}/мес`,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
},
color: "#3DC3FB",
style:{
fontSize: 20,
lineHeight: 18,
fontWeight: 500,
fontFamily: 'Gilroy',
fontStyle: 'normal',
}
},
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#3DC3FB',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Акции",
data: [0, 550],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#FF5252',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Облигации",
data: [0, 366],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#D2F449',
lineColor: 'green',
lineWidth: 0
}
}
},
},
{
type: 'line',
name: "Депозит",
data: [0, 275],
animation: {
defer: 1
},
marker: {
symbol: 'circle',
radius: 4,
states: {
hover: {
fillColor: '#179877',
lineColor: 'green',
lineWidth: 0
}
}
},
},
],
},
I am new to highcharts and have a hard time with huge documentation. help me please
Understood the cost of his sleep. For those who will be interested. So that the graph starts like in the picture.
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
}
and
{
type: 'line',
name: "ВДело",
data: [0, 1100],
dataLabels: {
x: -50,
y: -10,
enabled: true,
format: `{point.y}/мес`,
pointFormat: ' <b>{point.y:,.0f}/мес</b>',
shared: true,
color: "#3DC3FB",
style:{
fontSize: 20,
lineHeight: 18,
fontWeight: 500,
fontFamily: 'Gilroy',
fontStyle: 'normal',
}
},
When it comes to the place to start the chart in the category axis, you need to only change xAxis.min to 0.5
Sample code:
xAxis: {
min: 0.5,
tickmarkPlacement: 'on',
type: 'category'
},
Simplified demo:
https://jsfiddle.net/BlackLabel/jt1gqrnb/
I have a chart with multiple yAxis and I want to format each one differently. However, it seems with multiple yAxis, the label formatter function does not fire at all. Here's my options:
{
chart: {
backgroundColor: 'transparent',
pinchType: 'none',
height: 320,
events: {
load: (e) => {
}
}
},
plotOptions: {
line: {
states: {
hover: {
enabled: true
}
},
animation: {
duration: 750
}
},
series: {
lineWidth: 2,
}
},
series : [
{ name: 'charts',
type: 'line',
id: 0,
dataGrouping: {
groupPixelWidth: 8
},
},
{ name: 'marketcap',
type: 'line',
id: 1,
color: '#1fd3a3',
dataGrouping: {
groupPixelWidth: 8
},
},
{ name: 'volume',
type: 'area',
id: 2,
color: '#ddd',
lineWidth: 1,
dataGrouping: {
groupPixelWidth: 8
},
}
],
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
// responsive: {
// rules: [{
// condition: {
// maxWidth: 500
// },
// }]
// },
xAxis: {
// crosshair: {
// width: 1,
// color: 'rgba(255,255,255,.5)'
// },
visible: true,
type: 'datetime'
},
yAxis: [
{
opposite: false,
gridLineWidth: 0,
minorGridLineWidth: 0,
height: '75%',
tickAmount: 5,
labels: {
formatter: () => {
// this does not fire
console.log('firing!!');
return this.value
}
}
},
{
opposite: true,
gridLineWidth: 0,
minorGridLineWidth: 0,
height: '75%',
tickAmount: 5
},
{
top: '75%',
height: '25%',
opposite: false,
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
},
],
tooltip: {
followPointer: true,
shared: true,
},
credits: { enabled: false }
}
Notice that I have 3 yAxis, and within each of those I have different keys and values. I need to have a custom format for each, but when I try to use the formatter function, nothing happens. Using the format string value works, but it does not allow me to format the string the way I want. Any ideas?
i'm having a problem with my second yAxis using HighCharts. The spline graph scales correctly, however the bar graph (second yAxis) does not. Note that the bar graph has two sections - the irrelevant section is invisible.
http://jsfiddle.net/warricksmith/jqvxf30z/1/
$(function () {
$('#container').highcharts({
chart: {
alignTicks: false,
backgroundColor: null,
spacingBottom: 6,
spacingLeft: 2,
spacingRight: 2,
spacingTop: 2
},
credits: {
enabled: false
},
global: {
useUTC: false
},
legend: {
align: "center",
enabled: true,
layout: "horizontal",
verticalAlign: "bottom",
y: 5
},
navigator: {
enabled: false,
height: 40,
series: {
color: "#21B567"
}
},
plotoptions: {
column: {
borderwidth: 0
},
line: {
lineWidth: 1,
marker: {
enabled: false
}
},
series: {
pointInterval: null,
pointStart: null
},
spline: {
lineWidth: 2,
marker: {
enabled: true
}
}
},
rangeselector: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'Peak Demand',
stacking: null,
title: 'kVA',
type: 'spline',
color: "#FF6F34",
data: [821,
794,
737,
748,
778,
794,
889,
831,
819,
821,
821,
877],
tooltip: {
valueSuffix: 'kVA'
}
}, {
name: "Power at peak",
stacking: null,
title: "kVA",
tooltip: {
valueSuffix: " kVA"
},
type: "spline",
color: "#33BAE3",
data: [788,
770,
722,
733,
747,
755,
747,
814,
803,
804,
805,
737]
}, {
color: "#339A63",
data: [
0.04,
0.03,
0.02,
0.02,
0.04,
0.05,
0.16,
0.02,
0.02,
0.02,
0.02,
0.16],
name: "Power factor (lagging)",
stacking: 'normal',
title: "",
tooltip: {
valueSuffix: " "
},
type: "column",
yAxis: 1
}, {
color: "rgba(245,241,232,0)",
data: [
0.96,
0.97,
0.98,
0.98,
0.96,
0.95,
0.84,
0.98,
0.98,
0.98,
0.98,
0.84, ],
name: "Power factor (leading)",
stacking: "normal",
title: "",
tooltip: {
valueSuffix: " "
},
type: "column",
yAxis: 1
}, ],
title: {
text: 'Peak Demand and Power factor'
},
subtitle: {
text: 'Power-Star'
},
xAxis: [{
categories: ['Mar 14', 'Apr 14', 'May 14', 'Jun 14',
'Jul 14', 'Aug 14', 'Sep 14', 'Oct 14', 'Nov 14', 'Dec 14', 'Jan 15', 'Feb 15'],
lables: {
style: {
fontSize: "12px",
fontWeight: "bold"
}
},
tickPixelInterval: 150,
tickPosition: "inside",
type: "category"
}],
yAxis: [{ // Primary yAxis
gridLineWidth: 1,
index: 0,
labels: {
style: Object,
y: 10
},
max: undefined,
maxPadding: null,
min: undefined,
opposite: false,
title: {
text: "kVA"
}
}, {
gridLineWidth: 0,
index: 1,
labels: {
enabled: false
},
max: undefined,
maxPadding: null,
min: undefined,
opposite: false,
showLastLabel: false,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 2,
labels: {
y: 10
},
max: 1,
maxPadding: 0,
min: 0.8,
opposite: true,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 3,
labels: {
enabled: false
},
max: "1",
maxPadding: 0,
min: 0.8,
opposite: true,
showLastLabel: false,
title: {
text: ""
}
}, {
gridLineWidth: 0,
index: 4,
labels: {
enabled: false
},
max: "1",
maxPadding: 0,
min: 0.8,
opposite: true,
showLastLabel: false,
title: {
text: ""
}
}],
tooltip: {
shared: true
},
});
});
The problem is that you have so many yAxes that you made a mistake. You are connecting series to yAxis: 1 which means second yAxis in the options. Meanwhile you are setting min and max for third, fourth and fifth yAxes and enabling labels only for the third one..
Fixed demo: http://jsfiddle.net/jqvxf30z/2/
I set yAxis: 2 for series, since that yAxis is most probably responsible for columns.
I have a project where the data in the main chart is best represented as a column chart and the data in a drilldown should be a bar chart.
However when I try to drilldown, the drilldown is still a column chart even with the type set to bar.
Is this possible to do with the provided Highcharts drilldown API? I would like to have the "back" button and support multiple drilldown levels.
Here is a basic example that demonstrates the problem:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
type: 'bar',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
type: 'bar',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
type: 'bar',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
});
Here is a JSFIDDLE
http://jsfiddle.net/N2g98/
EDIT: This seems like it could be considered a bug in Highcharts as it is more of a problem than just drilling down from a column to a bar chart. If you start with a bar graph and drill down to a line graph, the axes are messed up in the drilldown.
EDIT2: Here is the solution I ended up with
$(function () {
(function (H) {
H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
var point = proceed.call(this, series, options, x),
chart = series.chart,
tick = series.xAxis && series.xAxis.ticks[x],
tickLabel = tick && tick.label;
if (point.drilldown) {
if (tickLabel) {
if (!tickLabel._basicStyle) {
tickLabel._basicStyle = tickLabel.element.getAttribute('style');
}
tickLabel.addClass('highcharts-drilldown-axis-label').css({
'text-decoration': 'none',
'font-weight': 'normal',
'cursor': 'auto'
}).on('click', function () {
if (point.doDrilldown) {
return false;
}
});
}
}
return point;
});
H.wrap(H.Pointer.prototype, 'setDOMEvents', function (proceed) {
proceed.call(this);
var pointer = this,
container = pointer.chart.container;
container.onclick = function (e) {
if (typeof pointer.onContainerClick === 'function') {
pointer.onContainerClick(e);
}
};
});
H.wrap(H.Chart.prototype, 'drillUp', function (proceed) {
if (!this.customDrilldown) {
proceed.call(this);
} else {
var userOptions = this.userOptions;
var drilldownLevels = this.drilldownLevels;
var level = drilldownLevels.pop();
var newChartConfig = level.userOptions;
this.destroy();
$(userOptions.chart.renderTo).highcharts(newChartConfig);
var newChart = $(userOptions.chart.renderTo).highcharts();
newChart.drilldownLevels = drilldownLevels;
if (drilldownLevels.length !== 0) {
newChart.showDrillUpButton();
}
newChart.customDrilldown = true;
HighchartsAdapter.fireEvent(newChart, 'drillup', {
seriesOptions: newChartConfig
});
}
});
H.wrap(H.Point.prototype, 'doDrilldown', function (proceed, _holdRedraw) {
if (!$.isPlainObject(this.drilldown)) {
proceed.call(this, _holdRedraw);
} else {
var newChartConfig = this.drilldown;
var oldChart = this.series.chart;
var userOptions = oldChart.userOptions;
var drilldownLevels = oldChart.drilldownLevels;
if (!drilldownLevels) {
drilldownLevels = [];
}
var oldSeries = this.series;
var level = {
userOptions: userOptions,
seriesOptions: oldSeries.userOptions
};
drilldownLevels.push(level);
oldChart.destroy();
$(userOptions.chart.renderTo).highcharts(newChartConfig);
var newChart = $(userOptions.chart.renderTo).highcharts();
newChart.drilldownLevels = drilldownLevels;
newChart.showDrillUpButton();
newChart.customDrilldown = true;
HighchartsAdapter.fireEvent(newChart, 'drilldown', {
point: this,
seriesOptions: newChartConfig
});
}
});
}(Highcharts));
var pieDD1 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD2 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 15
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD3 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 3
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD4 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 3
}]
}]
};
var pieDD5 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 13
}, {
name: 'Blue',
y: 11
}]
}]
};
var pieDD6 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD7 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD8 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 15
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD9 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 4
}, {
name: 'Blue',
y: 8
}]
}]
};
var pieDD10 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 33
}, {
name: 'Blue',
y: 66
}]
}]
};
var pieDD11 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 9
}, {
name: 'Blue',
y: 1
}]
}]
};
var pieDD12 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 8
}, {
name: 'Blue',
y: 13
}]
}]
};
var pieDD13 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 70
}, {
name: 'Blue',
y: 25
}]
}]
};
var pieDD14 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 50
}, {
name: 'Blue',
y: 10
}]
}]
};
var pieDD15 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 8
}, {
name: 'Blue',
y: 5
}]
}]
};
var pieDD16 = {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'colors'
},
series: [{
name: 'Color',
data: [{
name: 'Red',
y: 5
}, {
name: 'Blue',
y: 8
}]
}]
};
var drilldown = {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
type: 'category',
title: {
text: 'X Axis'
}
},
yAxis: {
title: {
text: 'Y Axis'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Widget A',
data: [{
name: 'Qtr 1',
y: 5,
drilldown: pieDD1
}, {
name: 'Qtr 2',
y: 25,
drilldown: pieDD2
}, {
name: 'Qtr 3',
y: 25,
drilldown: pieDD3
}, {
name: 'Qtr 4',
y: 20,
drilldown: pieDD4
}]
}, {
name: 'Widget B',
data: [{
name: 'Qtr 1',
y: 25,
drilldown: pieDD5
}, {
name: 'Qtr 2',
y: 5,
drilldown: pieDD6
}, {
name: 'Qtr 3',
y: 5,
drilldown: pieDD7
}, {
name: 'Qtr 4',
y: 15,
drilldown: pieDD8
}]
}]
};
var drilldown2 = {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'subtitle2'
},
xAxis: {
type: 'category',
title: {
text: 'X Axis'
}
},
yAxis: {
title: {
text: 'Y Axis'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Widget A',
data: [{
name: 'Qtr 1',
y: 15,
drilldown: pieDD9
}, {
name: 'Qtr 2',
y: 15,
drilldown: pieDD10
}, {
name: 'Qtr 3',
y: 30,
drilldown: pieDD11
}, {
name: 'Qtr 4',
y: 5,
drilldown: pieDD12
}]
}, {
name: 'Widget B',
data: [{
name: 'Qtr 1',
y: 5,
drilldown: pieDD13
}, {
name: 'Qtr 2',
y: 25,
drilldown: pieDD14
}, {
name: 'Qtr 3',
y: 10,
drilldown: pieDD15
}, {
name: 'Qtr 4',
y: 20,
drilldown: pieDD16
}]
}]
};
// Create the chart
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Yearly Orders',
data: [{
name: 'Location 1',
y: 100,
drilldown: drilldown
}, {
name: 'Location 2',
y: 150,
drilldown: drilldown2
}]
}]
});
});
http://jsfiddle.net/skTHx/22/