I am a total newbie to Highcharts and especially to Javascript. I wonder how to put hyperlinks behind the labels on the y-axis. So far I could not find an answer, neither in the docs nor here. I have something like this:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
colors: ['#c83f3f', '#66b257'],
fontFamily: 'Merriweather Sans, sans-serif',
xAxis: {
categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5', 'Test 6', 'Test 7', 'Test 8']
},
yAxis: {
min: 0,
max: 10,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Nicht erfüllte Kriterien',
data: [5, 3, 4, 7, 2, 6, 4, 5]
}, {
name: 'Erfüllte Kriterien',
data: [5, 7, 6, 3, 8, 4, 6, 5]
}]
});
Now I would like to put links to external sites behind the "Test 2", "Test 2" etc. labels. - How would I do that?
Thank you very much!
-Oliver
You can give anchor<a> tags in the categories array of xAxis. With specifying the link in it.like this:
categories: ['<a href="http://stackoverflow.com">Test 2',
'Test 5']
Sample code: I have given links to Test 2 and Test 5 in this sample:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
colors: ['#c83f3f', '#66b257'],
fontFamily: 'Merriweather Sans, sans-serif',
xAxis: {
categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', '<a href="http://stackoverflow.com/questions">Test 5', 'Test 6', 'Test 7', 'Test 8']
},
yAxis: {
min: 0,
max: 10,
title: {
text: ''
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Nicht erfüllte Kriterien',
data: [5, 3, 4, 7, 2, 6, 4, 5]
}, {
name: 'Erfüllte Kriterien',
data: [5, 7, 6, 3, 8, 4, 6, 5]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Related
i like to change the color of the bars in a stacked bar chart in highchart. I did not found the option where i can set the color foreach value. Joe should be red, Jane yellow, and John black.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
You can add the field color in your serie like:
series: [{
name: 'John',
color: '#ff8080',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
color: '#ffff00',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
color: '#000000',
data: [3, 4, 4, 2, 5]
}]
I have a sample highchart and I want to add the five text boxes with different colors at the bottom of the chart.
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Excellent',
data: [5, 3, 4, 1, 2]
}, {
name: 'Poor',
data: [2, 2, 9, 2, 1]
},
{
name: 'Fair',
data: [5, 3, 1, 7, 2]
}, {
name: 'Good',
data: [2, 2, 3, 6, 1]
}, {
name: 'Very good',
data: [3, 4, 8, 2, 5]
} ]
});
You can use the annotations module to add the text boxes:
annotations: [{
labelOptions: {
y: 0,
overflow: 'none',
shape: 'rect'
},
labels: [{
point: {
x: 50,
y: 280
},
backgroundColor: 'red',
text: 'some text'
}, {
point: {
x: 250,
y: 280
},
backgroundColor: 'blue',
text: 'some text'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4h0gp2qz/
API Reference: https://api.highcharts.com/highstock/annotations
I currently have a legend like Joe and John. I am needing to have a legend on Male and Female as well. How to add male and female legend as well to this. kindly help me out.
This is the JSFiddle of the code which I have tried so far.
Have also created a runnable snippet below if it would be of any help.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<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',
color: "#1f77ac",
id: 'John'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male',
color: "#098ebb",
id: 'Joe'
}, {
name: 'John',
data: [2, 5, 6, 2, 1],
stack: 'female',
linkedTo: 'John',
color: "#1f77ac"
}, {
name: 'Joe',
data: [3, 2, 4, 4, 3],
stack: 'female',
linkedTo: 'Joe',
color: "#098ebb",
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You can add empty series with names: male and female. To handle the click event use legendItemClick function:
series: [..., {
name: 'male',
events: {
legendItemClick: function() {
// hide some series
}
}
}, {
name: 'female',
events: {
legendItemClick: function() {
// hide some series
}
}
}]
Live demo: https://jsfiddle.net/BlackLabel/6x52kzqd/
API Reference: https://api.highcharts.com/highcharts/series.line.events.legendItemClick
yet another question: I have a stacked bar chart with categorized y-axis and I would like to have custom tooltips on each of the bars. But so far I cannot figure out how to address the individual category correctly. The tooltip formatter code I use works, but I cannot access the individual category. Can anyone help?
This is the code:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
colors: ['#c83f3f', '#66b257'],
xAxis: {
labels: {
style: {
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Merriweather Sans, sans-serif',
}
},
categories: ['Testlink Nummer 1', 'Objektname 2', 'Die Nummer 3', 'Test 4', 'Test 5', 'Test 6', 'Test 7', 'Test']
},
tooltip : {
formatter: function() {
var tooltip;
if (this.series == '1') {
tooltip = '<b>Final result is </b> ' + this.y;
}
else {
tooltip = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
}
return tooltip;
}
},
yAxis: {
min: 0,
max: 10,
title: {
text: ''
},
labels: {
style: {
fontWeight: 'normal',
fontFamily: 'Merriweather Sans, sans-serif',
}
},
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
groupPadding: 1,
pointWidth: 35,
}
},
credits: {
enabled: false
},
series: [{
name: 'Nicht erfüllte Kriterien',
data: [5, 3, 4, 7, 2, 6, 4, 5]
}, {
name: 'Erfüllte Kriterien',
data: [5, 7, 6, 3, 8, 4, 6, 5]
}]
});
Thanks a lot!
- Oliver
I am using Highcharts stacked bar chart, but not getting the lines at the end of values as it is in below image, can someone help me on this using Highcharts in built API or methods.
http://i.stack.imgur.com/y3AVm.png
create image and change the sun.png in js code.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'bar',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'bar',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'bar',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
data: [9, 8, 9, 19, 10],
lineWidth: 0,
enableMouseTracking: false,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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>