as i am trying with above displayed code, but unable to get data values over bar chart
i want data values to be displayed over bars. when i tried it by adding datalabels value get displayed in the bar not on the bar .please help in this regard.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9]
}, {
name: 'New York',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [42.4]
}]
});
});
Just set dataLabels: { enabled: true } under plotOptions. See: http://jsfiddle.net/3bQne/499/
Related
Please take a look at this jsfiddle highcharts example i prepared to show you our case:
http://jsfiddle.net/nogz0j2b/
Highcharts.chart('container', {
title: {
text: 'Test Chart'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Value 1',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Value 2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Value 1',
type: 'line',
yAxis: 1,
data: [2.50, 2.50, 2.50, 3.20, 3.20, 3.20, 3.20, 3.20],
}, {
name: 'Value 2',
type: 'line',
data: [150, 85.89, 67.43, 38.12, 12.50, 6.20, 2.20, 1.20],
}]
});
Somehow we need to align the two y axis to show the correct time when the 2 lines are crossing and Value 2 is smaller than Value 1. So in my example it would be in July.
Currently it is missleading because the line crossing is earlier because of the difrerent tick positions.
I hope you have some ideas ... thank you!
you can add linkedTo:0, in the secondary yAxis attributes and type: 'logarithmic', in both
So yAxis is
yAxis: [{ // Primary yAxis
type: 'logarithmic',
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Value 1',
style: {
color: Highcharts.getOptions().colors[1]
}
},
}, { // Secondary yAxis
linkedTo:0 ,
type: 'logarithmic',
title: {
text: 'Value 2',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
tickPositions: [0,1,2,3]
}],
Updated Fiddle
When I use multiaxes and big numbers, Highcharts renders double the height needed to show the data. How can I achieve fitting the vertical axis to the data correctly?
Here the example code:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 991009.6, 1010.2, 14563.1, 1016.9, 1018.2, 1016.7],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Sea-Level Pressure',
type: 'spline',
yAxis: 2,
data: [967416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 1010.2, 14563.1, 991016.9, 1018.2, 1016.7],
marker: {
enabled: false
},
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}, {
name: 'Temperature',
type: 'spline',
data: [067416, 056716, 1554.9, 15546.5, 10412.3, 1009.5, 1009.6, 991010.2, 14563.1, 1016.9, 1018.2, 1016.7],
tooltip: {
valueSuffix: ' °C'
}
}]
});
});
Fiddle here: http://jsfiddle.net/voqxkb3m/1/
You can set alignTicks: false to your chart properties.
Updated fiddle:
http://jsfiddle.net/jlbriggs/voqxkb3m/2/
You can adjust settings like maxPadding and endOnTick to further reduce the yAxis spacing.
http://jsfiddle.net/jlbriggs/voqxkb3m/3/
Using Highstock ("StockChart"), the tooltips for each bar in a column chart will show if hovering the "crosshair line" above the actual bar. See this example:
$('#container').highcharts('StockChart', {
chart: {
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
StockChart JSFiddle example
How do I achieve the same result using a Highcharts column chart? An example of a similar Highcharts example column chart can be found here:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'World\'s largest cities per 2014'
},
subtitle: {
text: 'Source: Wikipedia'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1],
['Instanbul', 14.2],
['Karachi', 14.0],
['Mumbai', 12.5],
['Moscow', 12.1],
['São Paulo', 11.8],
['Beijing', 11.7],
['Guangzhou', 11.1],
['Delhi', 11.1],
['Shenzhen', 10.5],
['Seoul', 10.4],
['Jakarta', 10.0],
['Kinshasa', 9.3],
['Tianjin', 9.3],
['Tokyo', 9.0],
['Cairo', 8.9],
['Dhaka', 8.9],
['Mexico City', 8.9],
['Lima', 8.9]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
Column JSFiddle example
As you can see in the second example, the tooltips only show when the actual bars are hovered. I realize I can achieve it by setting "shared" to true for the tooltip, like in this example:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
Column JSFiddle example using shared tooltip
The problem with that solution is that I don't want a shared tooltip, I want one individual tooltip for each bar.
Thank you.
There is no need of really using more than one series when using shared tooltip. The tooltip can be 'shared by itself' and you achieve the result you need (JSFiddle). Simply adding the tooltip configs of your third example in your second do the trick.
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
I am using a simple linechart.
See this example: http://jsfiddle.net/w0do5vus/5/
I want to display just a partial width of the series(including the markers).
How can I achieve this? For the line I manage to hide it, but the markers are still visible.
Thanks in advance.
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
var chart = $('#container').highcharts();
chart.clipRect.attr({
width: 200
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 300px"></div>
Below is my code to display basic column chart.
$(function () {
Highcharts.setOptions({
colors: ['#f89422','#8cc641']
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
colorbypoint: true,
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5]
}]
});
});
Though I have given 2 colors in the set options, and colorBypoint: true in plotOptions,
It is showing the same color. Orange.
Any idea? Please refer this fiddle - http://jsfiddle.net/88YSd/
The points are showing the same color as they are in the same series.
You can specify indivual point colors like this:
data: [{y:49.9,color:'#f89422'}, {y:71.5,color:'#8cc641'}]
http://jsfiddle.net/Zhmw2/
An alternative would be to put the two points in separate series
series: [{
name: 'Jan',
data: [49.9]
},{
name: 'Feb',
data: [71.5]
}
http://jsfiddle.net/H5KmK/