This is my example
crossSell1.push({ x: new Date(data[i][0]).getTime(), y: data[i][1], name: 'Category1' });
crossSell2.push({ x: new Date(data[i][0]).getTime(), y: data[i][2], name: 'Category2' });
crossSell3.push({ x: new Date(data[i][0]).getTime(), y: data[i][3], name: 'Category3' });
crossSell4.push({ x: new Date(data[i][0]).getTime(), y: data[i][4], name: 'Category4' });
renew1.push({ x: new Date(data[i][0]).getTime(), y: data[i][5], name: 'Category1' });
renew2.push({ x: new Date(data[i][0]).getTime(), y: data[i][6], name: 'Category2' });
renew3.push({ x: new Date(data[i][0]).getTime(), y: data[i][7], name: 'Category3' });
renew4.push({ x: new Date(data[i][0]).getTime(), y: data[i][8], name: 'Category4' });
upSell1.push({ x: new Date(data[i][0]).getTime(), y: data[i][9], name: 'Category1' });
upSell2.push({ x: new Date(data[i][0]).getTime(), y: data[i][10], name: 'Category2' });
upSell3.push({ x: new Date(data[i][0]).getTime(), y: data[i][11], name: 'Category3' });
upSell4.push({ x: new Date(data[i][0]).getTime(), y: data[i][12], name: 'Category4' });
Is there any way for the legend to show only Category1、Category2、Category3、Category4?
Expected
Or is there a better way to make my example?
Check series.column.linkedTo and I updated your series accordingly
series: [{
name: 'Category 1', //updated name accordingly
id: 'crossSell1',
data: crossSell1,
dataGrouping: {
units: groupingUnits
},
color: '#4E79A7'
}, {
name: 'Category 2',
id: 'crossSell2',
data: crossSell2,
dataGrouping: {
units: groupingUnits
},
color: '#F28E2B'
}, {
name: 'Category 3',
id: 'crossSell3',
data: crossSell3,
dataGrouping: {
units: groupingUnits
},
color: '#E15759'
}, {
name: 'Category 4',
id: 'crossSell4',
data: crossSell4,
dataGrouping: {
units: groupingUnits
},
color: '#59A14F'
}, {
name: 'Renew',
data: renew1,
linkedTo: 'crossSell1',
yAxis: 1,
dataGrouping: {
units: groupingUnits
},
color: '#4E79A7'
}, {
name: 'Renew',
data: renew2,
linkedTo: 'crossSell2',
yAxis: 1,
dataGrouping: {
units: groupingUnits
},
color: '#F28E2B'
}, {
name: 'Renew',
data: renew3,
yAxis: 1,
linkedTo: 'crossSell3',
dataGrouping: {
units: groupingUnits
},
color: '#E15759'
}, {
name: 'Renew',
data: renew4,
linkedTo: 'crossSell4',
yAxis: 1,
dataGrouping: {
units: groupingUnits
},
color: '#59A14F'
}, {
name: 'Up Sell',
data: upSell1,
linkedTo: 'crossSell1',
yAxis: 2,
dataGrouping: {
units: groupingUnits
},
color: '#4E79A7'
}, {
name: 'Up Sell',
data: upSell2,
linkedTo: 'crossSell2',
yAxis: 2,
dataGrouping: {
units: groupingUnits
},
color: '#F28E2B'
}, {
name: 'Up Sell',
data: upSell3,
yAxis: 2,
linkedTo: 'crossSell3',
dataGrouping: {
units: groupingUnits
},
color: '#E15759'
}, {
name: 'Up Sell',
data: upSell4,
yAxis: 2,
linkedTo: 'crossSell4',
dataGrouping: {
units: groupingUnits
},
color: '#59A14F'
}]
var data = [
['2017-01-01', 252, null, 77, null, null, null, null, 77, 219, null, null, null],
['2017-02-01', null, 65, null, null, 35, null, 199, 276, 210, null, null, null],
['2017-03-01', 247, 244, null, 50, null, 66, null, null, null, null, null, 12],
['2017-04-01', null, 25, 45, null, null, null, 23, 72, null, null, null, null],
['2017-05-01', null, null, 24, 85, null, 65, null, null, 175, null, null, 0],
['2017-06-01', null, 557, null, 60, null, 44, null, 274, 0, null, null, null],
['2017-07-01', null, null, 50, null, 35, null, 199, 280, null, null, null, null],
['2017-08-01', null, null, 25, null, 32, null, 199, 278, 13, null, null, null],
['2017-09-01', null, null, null, null, 150, 244, 199, 278, null, null, null, null],
['2017-10-01', null, 486, 35, null, null, null, null, null, null, null, null, null]
];
// split the data set into ohlc and volume
var crossSell1 = [],
crossSell2 = [],
crossSell3 = [],
crossSell4 = [],
renew1 = [],
renew2 = [],
renew3 = [],
renew4 = [],
upSell1 = [],
upSell2 = [],
upSell3 = [],
upSell4 = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [
[
'month', [2]
]
],
i = 0;
for (i; i < dataLength; i += 1) {
crossSell1.push({
x: new Date(data[i][0]).getTime(),
y: data[i][1],
name: 'Category1'
});
crossSell2.push({
x: new Date(data[i][0]).getTime(),
y: data[i][2],
name: 'Category2'
});
crossSell3.push({
x: new Date(data[i][0]).getTime(),
y: data[i][3],
name: 'Category3'
});
crossSell4.push({
x: new Date(data[i][0]).getTime(),
y: data[i][4],
name: 'Category4'
});
renew1.push({
x: new Date(data[i][0]).getTime(),
y: data[i][5],
name: 'Category1'
});
renew2.push({
x: new Date(data[i][0]).getTime(),
y: data[i][6],
name: 'Category2'
});
renew3.push({
x: new Date(data[i][0]).getTime(),
y: data[i][7],
name: 'Category3'
});
renew4.push({
x: new Date(data[i][0]).getTime(),
y: data[i][8],
name: 'Category4'
});
upSell1.push({
x: new Date(data[i][0]).getTime(),
y: data[i][9],
name: 'Category1'
});
upSell2.push({
x: new Date(data[i][0]).getTime(),
y: data[i][10],
name: 'Category2'
});
upSell3.push({
x: new Date(data[i][0]).getTime(),
y: data[i][11],
name: 'Category3'
});
upSell4.push({
x: new Date(data[i][0]).getTime(),
y: data[i][12],
name: 'Category4'
});
}
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'column',
marginRight: 150
},
rangeSelector: {
selected: 0
},
legend: {
enabled: true,
align: 'right',
borderWidth: 1,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
labelFormatter: function() {
return this.name;
}
},
title: {
text: 'Gross Sales'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Cross Sell'
},
height: '33%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Renew'
},
top: '34%',
height: '33%',
offset: 0,
lineWidth: 2
},
{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Up Sell'
},
top: '67%',
height: '33%',
offset: 0,
lineWidth: 2,
plotOptions: {
column: {
stacking: 'normal'
}
}
}
],
tooltip: {
split: false,
formatter: function() {
var date = new Date(this.x);
return 'Category: <b>' + this.key +
'</b><br>Date: <b>' +
date.getFullYear() + "/" +
(date.getMonth() + 1) + "/" +
date.getDate() +
'</b><br>USD: <b>$' + this.y + 'K</b>';
}
},
series: [{
name: 'Category 1',
id: 'crossSell1',
data: crossSell1,
dataGrouping: {
units: groupingUnits
},
color: '#4E79A7'
},
{
name: 'Category 2',
id: 'crossSell2',
data: crossSell2,
dataGrouping: {
units: groupingUnits
},
color: '#F28E2B'
},
{
name: 'Category 3',
id: 'crossSell3',
data: crossSell3,
dataGrouping: {
units: groupingUnits
},
color: '#E15759'
},
{
name: 'Category 4',
id: 'crossSell4',
data: crossSell4,
dataGrouping: {
units: groupingUnits
},
color: '#59A14F'
},
{
name: 'Renew',
data: renew1,
linkedTo: 'crossSell1',
yAxis: 1,
dataGrouping: {
units: groupingUnits
},
color: '#4E79A7'
},
{
name: 'Renew',
data: renew2,
linkedTo: 'crossSell2',
yAxis: 1,
dataGrouping: {
units: groupingUnits
},
color: '#F28E2B'
},
{
name: 'Renew',
data: renew3,
yAxis: 1,
linkedTo: 'crossSell3',
dataGrouping: {
units: groupingUnits
},
color: '#E15759'
},
{
name: 'Renew',
data: renew4,
linkedTo: 'crossSell4',
yAxis: 1,
dataGrouping: {
units: groupingUnits
},
color: '#59A14F'
},
{
name: 'Up Sell',
data: upSell1,
linkedTo: 'crossSell1',
yAxis: 2,
dataGrouping: {
units: groupingUnits
},
color: '#4E79A7'
},
{
name: 'Up Sell',
data: upSell2,
linkedTo: 'crossSell2',
yAxis: 2,
dataGrouping: {
units: groupingUnits
},
color: '#F28E2B'
},
{
name: 'Up Sell',
data: upSell3,
yAxis: 2,
linkedTo: 'crossSell3',
dataGrouping: {
units: groupingUnits
},
color: '#E15759'
},
{
name: 'Up Sell',
data: upSell4,
yAxis: 2,
linkedTo: 'crossSell4',
dataGrouping: {
units: groupingUnits
},
color: '#59A14F'
}
]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
Fiddle demo
Related
how to highcharts code new for local to set the values for stacked columnhow to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column how to highcharts code new for local to set the values for stacked column
public options: any = {
title: {
text: 'Sales of petroleum products March, Norway',
align: 'left'
},
xAxis: {
categories: ['Jet fuel', 'Duty-free diesel', 'Petrol', 'Diesel', 'Gas oil']
},
yAxis: {
title: {
text: 'Million liter'
}
},
labels: {
items: [{
html: 'Total liter',
style: {
left: '50px',
top: '18px',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'black'
}
}]
},
plotOptions: {
column: {
stacking: 'percent' // normal or percent
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: [{
type: 'column',
name: '2020',
data: [59, 83, 65, 228, 184]
}, {
type: 'column',
name: '2021',
data: [24, 79, 72, 240, 167]
}, {
type: 'column',
name: '2022',
data: [58, 88, 75, 250, 176]
}, {
type: 'spline',
name: 'Average',
data: [47, 83.33, 70.66, 239.33, 175.66],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
};
public options1: any = {
chart: {
zoomType: 'xy'
},
colors: ['#7cb5ec', '#91e8e1', '#90ed7d'],
title: {
text: 'Something '
},
subtitle: {
text: 'subsomething'
},
xAxis: [{
categories: ['1/1','2/1','3/1','4/1', '5/1', '6/1','7/1','8/1','9/1','10/1','11/1', '12/1', '13/1', '14/1', '15/1']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
min: 0,
max:100,
title: {
text: 'Percent',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'sample',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
max: 100,
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0],
display:'none'
}
},
opposite: true
}],
tooltip: {
shared: false
},
legend: {
layout: 'vertical',
align: 'center',
x: -0,
verticalAlign: 'top',
y: 400,
floating: true,
// backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [
{
name: 'suff1',
type: 'column',
yAxis: 1,
data: [10, 25, 10,30,80, 20, 25, 10,30,80, 20, 25, 10,30,80],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'suff2',
type: 'column',
yAxis: 1,
tooltip: {
valueSuffix: ' %'
},
data: [20, 50, 30,30,10, 30, 50, 30,30,10, 30, 50, 30,30,10]
}, {
name: 'suff3',
yAxis: 1,
type: 'column',
tooltip: {
valueSuffix: ' %'
},
data: [30,5, 60, 40, 10, 50,25, 60, 40, 10, 50,25, 60, 40, 10]
},
{
name: 'NS',
type: 'spline',
data: [45,55,74,85,81, 45,55,74,85,81, 45,55,74,85,81],
tooltip: {
valueSuffix: '%'
}
}]
};
Highcharts.chart('container-nps', this.options);
import * as Highcharts from 'highcharts';
<div id="container-nps"></div>
Im doing a chart with 2 series. One of the series is 'scatter' type and the other is 'column' type.
The problem i have, is that when i only have the scatter series, datetime labels on x axis, starts on the extreme left, but when i add the column series, is like all labels are pushed to the center, and i dont know why.
This is my fiddle examen: https://jsfiddle.net/cswpgq8u/7/
Highcharts.chart('container', {
chart: {
},
xAxis: {
type: 'datetime',
min: 1633057200000,
max: 1634353200000,
tickPositioner: function () {
var ticklist = [];
var extremes = this.getExtremes();
var startDate = extremes.min;//this.min;
var endDate = extremes.max; // this.max;
var diff = moment.duration(endDate - startDate);
if (diff.days() * 1 > 10)
increment = moment.duration(2, 'days').asMilliseconds();
else
increment = Math.ceil((endDate - startDate) / 10);
for (var timeline = startDate; moment(timeline) <= moment(endDate); timeline += increment) {
ticklist.push(timeline);
}
return ticklist;
},
maxPadding: 0,
minPadding: 0,
crosshair: {
enabled: true,
events: {
}
},
plotLines: [{
value: 1634266800000,
color: 'green',
width: 1,
dashStyle: 'ShortDash',
label: {
text: "AHORA", // Content of the label.
verticalAlign: 'bottom',
rotate: -90,
textAlign: 'right',
x: -2,
y: 30,
style: { color: '#6d6d6d', fontSize: '8px', fontWeight: 'bold', backgroundColor: 'white' }
},
}],
plotBands: null,
labels: {
formatter: function () {
var xMin = this.axis.min;
var xMax = this.axis.max;
var labeltick = Highcharts.dateFormat('%d. %B', this.value);
if ((moment(xMax).diff(moment(xMin), 'days')) < 10) {
labeltick = Highcharts.dateFormat('%d. %B %H:%M:%S', this.value);
}
return labeltick;
},
x: -10
}
},
yAxis:[
{
plotLines: [{
id: 'ln-' + 'idEje1',
color: '#9FA0A2',
width: 0,
value: 0,
dashStyle: 'longdashdot'
}],
labels: {
enabled:true,
x: -5,
y: -3,
},
title: {
enabled: false,
},
lineColor: 'lightgray',
lineWidth: 0,
tickInterval: 1
}, {
title: {
enabled: false,
},
lineColor: 'lightgray',
opposite: true,
labels: {
enabled: false,
x: -15,
y: -3,
},
lineWidth: 0,
tickInterval: 1
}
],
plotOptions: {
},
series: [
{
yAxis: 0,
type: 'scatter',
minPointLength: 1,
allowPointSelect: false,
stack: true,
data: [{
x: 1634007600000,
y: 2,
value: 2,
marker: {
symbol: 'circle',
radius: 3,
fillColor: 'red',
},
type: "ttf"
},
{
x: 1633748400000,
y: 5,
value: 2,
marker: {
symbol: 'circle',
radius: 3,
fillColor: 'red',
},
type: "ttf"
},
{
x: 1633143600000,
y: 2,
value: 2,
marker: {
symbol: 'circle',
radius: 3,
fillColor: 'red',
},
type: "ttf"
},
{
x: 1633402800000,
y: 2,
value: 2,
marker: {
symbol: 'circle',
radius: 3,
fillColor: 'red',
},
type: "ttf"
}],
name: 'On YAxis 0',
tooltip: {
pointFormatter: function () {
var point = this;
return "Valor TTF:" + ' <b>' + point.y + ' Días</b><br/>';
},
}
},
{
yAxis: 1,
type: 'column',
allowPointSelect: false,
minPointLength: 1,
data: [{
x: 1633708800000,
y: 5,
type: "duracion",
value: 5
},
{
x: 1633881600000,
y: 3,
type: "duracion",
value: 3
}],
name: 'On YAxis1',
tooltip: {
pointFormatter: function () {
var point = this;
return "Duración:" + ' <b>' + point.y + ' minutos</b><br/>';
},
},
pointWidth: 1
}
]
});
With 2 series
With one series
I think this is happening because Column Series. But dont know how to solve it.
The additional space is caused by the default calculation of pointRange for column series. You need to define it by yourself:
series: [{
type: 'scatter',
...
},
{
type: 'column',
pointRange: 1,
...
}
]
Live demo: https://jsfiddle.net/BlackLabel/hsrxtjaw/
API Reference: https://api.highcharts.com/highcharts/series.column.pointRange
I want to display my exact tooltips display ( 'LabelName:y.axis' (with legend color)) , into another div (most probably above the chart). And it should be per panehovering (currently having 3 panes). Is this possible?..
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json',
function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
volume2 = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [
[
'week', // unit name
[1] // allowed multiples
],
[
'month',
[1, 2, 3, 4, 6]
]
],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
volume2.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '33%',
lineWidth: 2,
id: '0',
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '33%',
height: '33%',
offset: 0,
lineWidth: 2,
id: '1',
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume 123'
},
top: '66%',
height: '33%',
offset: 0,
lineWidth: 2,
id: '2'
},{
opposite:false,
labels: {
align: 'right',
x: -3
},
title: {
text: 'second AAPL'
},
height: '33%',
offset: 0,
lineWidth: 2,
id: '3'
}],
xAxis: [{
offset: -4,
lineWidth: 2
}],
legend: {
enabled: true
},
tooltip: {
split: true
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
yAxis: 0
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
}, {
type: 'column',
name: 'Volume123',
data: volume,
yAxis: 2,
}, {
type: 'spline',
name: 'second AAPL',
data: ohlc,
yAxis: 3,
}]
});
});
This is my working demo fiddle . This is how my code look like.I want to make the tooltip data to be displayed in other div,so far I have tried, only one data series getting called..
Visual Representation of desired tooltips
I really appreciate any help
Use the below options to position a tooltip in the div above the chart:
tooltip: {
...,
shared: true,
split: false,
shape: 'rect',
outside: true,
positioner: function() {
return {
x: 0,
y: 0
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/akwgf7hm/
API Reference: https://api.highcharts.com/highcharts/tooltip.positioner
This is a follow-up issue I'm having to this answered problem. I needed help with keeping series grouped together, but spaced apart between categories. I've added drilldown to the chart, and there is an issue with the datalabels when drilling down - they don't center over the columns anymore. The more you drill up and down, the more off they become. I've figured out the reason has to do with resetting the category names, although I have no idea why or what to do about it. But in the drilldown event, if you comment out where the categories are getting reset, the datalabels are centered again.
Here's a fiddle to show what I mean -- any suggestions?
var redrawEnabled = true;
var refChart = new Highcharts.chart('ctReferralsDetail', {
chart: {
backgroundColor: 'whiteSmoke',
type: 'column',
width: 800,
events: {
drilldown: function() {
refChart.xAxis[0].setCategories(["Ballard", "Butler", "Central", "Doss", "Iroquois", "Male", "Pleasure Ridge"]);
refChart.xAxis[0].update({
max: categoriesAA.length - 1
}, true);
this.update({
scrollbar: {
enabled: true,
}
}, false);
redraw(this);
},
drillupall: function() {
this.update({
scrollbar: {
enabled: false
}
}, false);
redraw(this);
},
render: function() {
redraw(this);
},
}
},
title: {
text: "# Referrals"
},
subtitle: {
text: 'subTitle'
},
xAxis: {
categories: ['Elementary 1', 'Elementary 2', 'Elementary 3', 'Middle', 'High'],
min: 0,
max: 4,
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
allowOverlap: true
},
grouping: false,
pointWidth: 45
}
},
series: [{
name: "2017-18",
data: [{
drilldown: 'py1',
y: 5513
}, {
drilldown: 'py2',
y: 5403
}, {
drilldown: 'py3',
y: 3132
}, {
drilldown: 'py4',
y: 12385
}, {
drilldown: 'py5',
y: 22679
}]
}, {
name: "2018-19",
data: [{
drilldown: 'cy1',
y: 5738
}, {
drilldown: 'cy2',
y: 4397
}, {
drilldown: 'cy3',
y: 3508
}, {
drilldown: 'cy4',
y: 10811
}, {
drilldown: 'cy5',
y: 22743
}]
}],
drilldown: {
allowPointDrilldown: false,
series: [{
name: "2017-18",
id: "py1",
data: [93, 41, 410, 84, 76, 120, 11, 525]
}, {
name: "2018-19",
id: "cy1",
data: [84, 48, 423, 78, 76, 123, 19, 502]
}]
}
})
function redraw(parm) {
var series = parm.series;
if (redrawEnabled) {
if (parm.chartWidth > 600) {
if (parm.options.plotOptions.column.grouping) {
redrawEnabled = false;
parm.update({
plotOptions: {
column: {
grouping: false
}
}
});
redrawEnabled = true;
}
series.forEach(function(s, i) {
s.points.forEach(function(p) {
if (i === 0) {
p.graphic.attr({
translateX: 25
});
p.dataLabel.attr({
translateX: p.dataLabel.translateX + 25
});
} else {
p.graphic.attr({
translateX: -25
});
p.dataLabel.attr({
translateX: p.dataLabel.translateX - 25
});
}
});
});
} else {
if (!parm.options.plotOptions.column.grouping) {
redrawEnabled = false;
this.update({
plotOptions: {
column: {
grouping: true
}
}
});
redrawEnabled = true;
}
}
}
}
In my opinion, you don't need your own function to position the columns as you did. The easiest solution is to remove the pointWidth and then set appropriate pointPadding and groupPadding to create greater space between categories. Then drilldown works as expected. Check demo I posted you below.
Code:
var refChart = new Highcharts.chart('ctReferralsDetail', {
chart: {
backgroundColor: 'whiteSmoke',
type: 'column',
width: 800
},
title: {
text: "# Referrals"
},
subtitle: {
text: 'subTitle'
},
xAxis: {
categories: ['Elementary 1', 'Elementary 2', 'Elementary 3', 'Middle', 'High'],
min: 0,
max: 4,
},
yAxis: [{
title: {
useHtml: true,
text: '<strong># Referrals</strong>'
}
}],
tooltip: {
shared: true,
},
plotOptions: {
column: {
borderRadius: 5,
dataLabels: {
enabled: true,
allowOverlap: true
},
groupPadding: 0.15,
pointPadding: 0.05
}
},
series: [{
name: "2017-18",
data: [{
drilldown: 'py1',
y: 5513
}, {
drilldown: 'py2',
y: 5403
}, {
drilldown: 'py3',
y: 3132
}, {
drilldown: 'py4',
y: 12385
}, {
drilldown: 'py5',
y: 22679
}]
}, {
name: "2018-19",
data: [{
drilldown: 'cy1',
y: 5738
}, {
drilldown: 'cy2',
y: 4397
}, {
drilldown: 'cy3',
y: 3508
}, {
drilldown: 'cy4',
y: 10811
}, {
drilldown: 'cy5',
y: 22743
}]
}],
drilldown: {
allowPointDrilldown: false,
series: [{
name: "2017-18",
id: "py1",
data: [93, 41, 410, 84, 76, 120, 11, 525]
}, {
name: "2018-19",
id: "cy1",
data: [84, 48, 423, 78, 76, 123, 19, 502]
}]
}
});
Demo:
https://jsfiddle.net/BlackLabel/7ok69jbq/1/
I am using highcharts for visualization . I am trying to plot similar kind of chart. I have tried it using multiple y axis and finally ended up with
$(function() {
$('#container').highcharts({
chart: {
borderWidth: 2,
height: 600,
width: 500,
animation: false
},
xAxis: [{
gridLineWidth: 1,
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
gridLineWidth: 1,
gridLineColor: '#E0E0E0',
crosshair: true
}],
yAxis: [{
height: 200,
lineWidth: 1,
offset: 0,
title: {
text: 'power'
}
},
{
top: 300,
height: 200,
lineWidth: 1,
offset: 1,
title: {
text: 'books'
}
}
],
legend: {
title: {
text: 'Stage: ',
style: {
fontStyle: 'italic'
}
},
floating: false,
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
},
plotOptions: {
series: {
borderWidth: 0,
shadow: false
},
column: {
animation: false,
grouping: true
},
line: {
stacking: 'normal'
}
},
series: [{
yAxis: 0,
name: 'Boston',
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
yAxis: 0,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
yAxis: 0,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
yAxis: 0,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}, {
yAxis: 1,
type: 'column',
name: 'Boston',
data: [4000, 3000, 1000, 6000]
}, {
yAxis: 1,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
yAxis: 1,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
yAxis: 1,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
well, solution is to add id and colour to every series item (you can also define global colours instead):
id: "series0",
color: "red",
Then for the second axis series items you need to add linkedTo: <id> parameters. See how it works (colours specified only to 0 and 4th elements just to show that it works):
$(function() {
$('#container').highcharts({
chart: {
borderWidth: 2,
height: 600,
width: 500,
animation: false
},
xAxis: [{
gridLineWidth: 1,
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
gridLineWidth: 1,
gridLineColor: '#E0E0E0',
crosshair: true
}],
yAxis: [{
height: 200,
lineWidth: 1,
offset: 0,
title: {
text: 'power'
}
},
{
top: 300,
height: 200,
lineWidth: 1,
offset: 1,
title: {
text: 'books'
}
}
],
legend: {
title: {
text: 'Stage: ',
style: {
fontStyle: 'italic'
}
},
floating: false,
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100
},
plotOptions: {
series: {
borderWidth: 0,
shadow: false
},
column: {
animation: false,
grouping: true
},
line: {
stacking: 'normal'
}
},
series: [{
id: "series0",
color: "red",
name: 'Boston',
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
id: "series1",
yAxis: 0,
type: 'column',
name: 'Swindon',
data: [1000, 6000, 3000, 2000]
}, {
id: "series2",
yAxis: 0,
type: 'column',
name: 'Ethiopia',
data: [3000, 7000, 2000, 8000]
}, {
id: "series3",
yAxis: 0,
type: 'column',
name: 'Chicago',
data: [6000, 2000, 3000, 4000]
}, {
id: "series4",
linkedTo: "series0",
color: "red",
yAxis: 1,
type: 'column',
data: [4000, 3000, 1000, 6000]
}, {
id: "series5",
linkedTo: "series1",
yAxis: 1,
type: 'column',
data: [1000, 6000, 3000, 2000]
}, {
id: "series6",
linkedTo: "series2",
yAxis: 1,
type: 'column',
data: [3000, 7000, 2000, 8000]
}, {
id: "series7",
linkedTo: "series3",
yAxis: 1,
type: 'column',
data: [6000, 2000, 3000, 4000]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>