Adding call outs to a Highcharts - Stacked Bar
Live demo: http://jsfiddle.net/5joufkwa/9/
Solution is to use series.dataLabels
and generate there callouts:
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
align: "right", // right align for label
enabled: true,
useHTML: true,
allowOverlap: true,
overflow: "none",
crop: false,
y: -50,
x: 145,
formatter: function () {
return '<div class="callout top" data-name="Jane">I need to have this call out point to 75!</div>';
}
}
}
},
Note: x
and y
may vary, since those depends on width and height of the callout.
Callouts at specific points in Highcharts
You can use Pawel's solution from similar topic: Adding call outs to a Highcharts - Stacked Bar
You can add if statement inside your dataLabels formatter to check if your dataLabel is connected with specific series. Then you can show the callout or remove label, depending on the series name.
formatter: function() {
return this.series.name === 'John' ? '<div class="callout top" data-name="Jane">Callout for John!</div>' : false;
}
Here you can find an example how it can work: http://jsfiddle.net/5joufkwa/30/
Can we have multiple callout in timeline chart for single point?
You can add the second label as an annotation and customize&style it for your needs.
Demo: https://jsfiddle.net/BlackLabel/yx68cd91/
annotations: [{
labelOptions: {
shape: 'connector',
align: 'right',
},
labels: [{
point: 'test',
text: 'test of the annotation'
}],
}],
API: https://api.highcharts.com/highcharts/annotations
Highcharts stacked column bar with line
Here is a solution with plain JS.
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
JS:
$(function () {
$('#container').highcharts({
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: '',
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: true
},
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: [20, 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: [30, 50, 30,30,10, 30, 50, 30,30,10, 30, 50, 30,30,10]
}, {
name: 'suff3',
yAxis: 1,
type: 'column',
tooltip: {
valueSuffix: ' %'
},
data: [50,25, 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: '%'
}
}]
});
});
I made a JS fiddle with this example. You can check it here
Type Labels on Stacked and grouped column - Highcharts
The OP wrote in a comment:
Thank you so much !, Works like a charm :)
Based on fiddle sample by @Barbara Laird
Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Total fruit consumtion, grouped by gender' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'], labels: { y: 40 } }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Number of fruits' }, stackLabels: { enabled: true, verticalAlign: 'bottom', crop: false, overflow: 'none', y: 20, formatter: function() { return this.stack; }, style: { fontSize: '9px' } } }, legend: { labelFormatter: function() { return this.name + ' (' + this.userOptions.stack + ')'; } }, tooltip: { formatter: function() { var stackName = this.series.userOptions.stack;
return '<b>Stack name: </b>' + stackName + '<br/><b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal' } }, series: [{ name: 'John', data: [5, 3, 4, 7, 2], stack: 'male' }, { name: 'Joe', data: [3, 4, 4, 2, 5], stack: 'male' }, { name: 'Jane', data: [2, 5, 6, 2, 1], stack: 'female' }, { name: 'Janet', data: [3, 0, 4, 4, 3], stack: 'female' }]});
<script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Bar chart with Stacked bar
You've got a ridiculous amount of questions in this one question. In the future separate them out, it makes it easier to answer and it makes the questions more useful for future readers. But, let me see if I can help:
1) You can either use null for the series you don't want to overlap or use x and y coordinates
series: [{
name: 'A',
//stack: 1,
data: [{x:60, y:4000}, {x:61, y:4000}, {x:62, y:4000}, {x:63, y:4000}]
}, {
name: 'B',
id: 'B',
color: 'red',
//stack: 2,
data: [{x:63, y:1000}, {x:64, y:1000}, {x:65, y:1000}, {x:66, y:1000}, {x:67, y:1000}, {x:68, y:1000}, {x:69, y:1000}, {x:70, y:1000}]
}, {
name: 'C',
linkedTo:'B',
color: 'red',
//stack: 2,
data: [{x:66, y:400}, {x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]
},{
name: 'D',
//stack: 2,
data: [{x:63, y:400}, {x:64, y:600}, {x:65, y:700}, {x:66, y:800}, {x:67, y:1100}, {x:68, y:1100}, {x:69, y:1100}, {x:70, y:1100}, {x:71, y:1100}, {x:72, y:1100}, {x:73, y:1100}, {x:74, y:1100}]
}, {
name: 'E',
//stack: 2,
data: [{x:64, y:400}, {x:65, y:400},{x:66, y:400},{x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]
}]
2) You seem to have figured out the click events. Note that you can override the click event per series, so for your series that you don't want to have events just add a click event to the series that does nothing:
series: [{
name: 'A',
events: {
click: function() {
return true;
}
},
3) The line you are looking for is a y-Axis plot line
yAxis: {
labels: {
formatter: function() {
return '\u20ac' + ' ' + this.value
},
x: -20,
y: 0
},
plotLines: [{
value: 1000,
color: 'red',
width: 3,
zIndex: 10,
id: 'plot-line-1'
}],
4 - from comments) Showing 2 series as one color and one legend item for both. You can set each series' color manually. Use that to set them both as the same color. To only show one in the legend, use linkedTo
, {
name: 'B',
id: 'B',
color: 'red',
//stack: 2,
data: [{x:63, y:1000}, {x:64, y:1000}, {x:65, y:1000}, {x:66, y:1000}, {x:67, y:1000}, {x:68, y:1000}, {x:69, y:1000}, {x:70, y:1000}]
}, {
name: 'C',
linkedTo:'B',
color: 'red',
//stack: 2,
data: [{x:66, y:400}, {x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]
}
5 - also from comments) Highlighting the value on the axis. You can use the formatter function to modify the labels on the axis
yAxis: {
labels: {
useHTML: true,
formatter: function() {
if (this.value == 1000) return '<span class="highlight">' + '\u20ac' + ' ' + this.value + '</span>'
return '\u20ac' + ' ' + this.value
},
x: -20,
y: 0
},
http://jsfiddle.net/wt45e6mL/31/
Related Topics
Center Div in Parent with Only Min-Height, and Child May Without Height & with Relative Position
Embedded Facebook Like-Box Won't Let Me Style It. Why
What Is The 'Best Practice' Way of Creating an Icon Button with an Svg
Navigation Hyperlinks Only Work When Mouse Is on The Text
Li:Before{ Content: "■"; } How to Encode This Special Character as a Bullit in an Email Stationery
Sass Mixin for Background Transparency Back to Ie8
What Is The Least Horrible Way to Center an Element with CSS
CSS3 Box Shadow Size - Percent Units
Mobile Menu Open & Close Buttons Display in Chrome But Not Safari
CSS Grid Vs Dynamic Definition List Autoplacement
What Are The Various Ways to Hide a <Div>
CSS Hoverable Dropdown Menu Doesn't Close on Mobile
How to Embed an CSS Background Image Link with Jsf
Image and Color Overlay on Hover