If you use a bar chart in Highcharts, the zoom does not seem to work properly.
You can select the area and also the button "Reset zoom" appears. The chart, however, is not zoomed in.
The only code I added to the basic bar example was the zoom type:
chart: {
type: 'bar',
zoomType: 'x'
},
Complete example: http://jsfiddle.net/966off9e/
Is this a bug or a feature? ;-)
I think this is somehow a bug in Highcharts, when you use categorized axis. But a workaround would be using a min for that axis:
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
min: 0
}
Here's the DEMO
Just add 'minRange' to the xAxis: http://jsfiddle.net/mushigh/axy8v9oa/
<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; max-width: 800px; height: 400px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
zoomType: 'x'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
minRange: 1,
},
yAxis: {
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
Another possibility is that the amount of data is bigger than the cropThreshold variable. See this related post.
You can also see the official docs for this variable. Every kind of graphic has this variable with different default values. You should check it out to be sure.
Related
When I use the highchart labels are not coming with the ellipsis style.
For that, I need to enter more texts to achieve that by default.
For example,
for the label text "Africa hi hello how are you. I am fine. thank you. what about you? how is going? Nothing special", it shows the ellipsis as "Africa hi hello how are yo.."
But if I remove "Nothing special" and having only the following sentence, "Africa hi hello how are you. I am fine. thank you. what about you? how is going?", then labels are wrapped instead of applying ellipsis.
I have tried the formatter, but the tooltip is not coming by default.
If I use, usehtml property the design gets collapsed.
Please see the following code.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa hi hello how are you. I am fine. thank you. what about you? ho?', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
labels:{
formatter: function () {
return this.value;
}, style: {
color: 'black',
overflow:'none'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
stacking:'normal',
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<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; max-width: 800px; height: 400px; margin: 0 auto"></div>
Notice that in the demo that you provided the look of the label depends on the size of the chart. Ellipsis is applied when the width is very small. Otherwise words of the label are wrapped.
Your example as live demo: http://jsfiddle.net/BlackLabel/c7f2oadg/
Use configuration similar to the below one if you want to be sure that ellipsis will always be applied to long labels:
style: {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: 100,
}
width causes here that ellipsis will be used in all labels wider than 100 px.
Live demo: http://jsfiddle.net/BlackLabel/v213vwts/
API reference: https://api.highcharts.com/highcharts/xAxis.labels.style
Check the fiddle - http://jsfiddle.net/4R5HH/209/ - this is just for testing.
I have a target label on y-axis which hides the series tooltip when hover over them.
any solution to this.
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:75,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'},
dashStyle: 'line',
label: {
useHTML: true,
text: '<div class="targetLabel"><span>Target</span><br/><span style="font-weight: bold; padding-top: 5px;">' + '75' + '</span></div>',
align: 'center',
rotation: 0
},
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 50]
},
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}]
});
});
});
Got the answer from the Highcharts forum.
So adding the link for reference - http://forum.highcharts.com/highcharts-usage/highcharts-y-axis-plotlines-label-hides-the-tooltip-t31539/
Can you please take a look at this demo and let me know how I can enable highcharts to put the legend items in one line and at buttom of the chart?
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
As you can see the position of the legend is the right and it is in two line now.
Thanks
You will want this:
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
}
Demo: http://jsfiddle.net/robschmuecker/pxS6X/
I'm using Highcharts.js library and when Bar Chart height is small, yAxis labels get skipped. By increasing the size of the bar chart the labels appear again. How do you avoid the labels disappearing.
See this jsfiddle for example - http://jsfiddle.net/VbecE/3/
<script src="http://code.highcharts.com/highcharts.js"></script>
<h3>Why does this skip yaxis labels America and Europe?</h3>
<div id="container" style="min-width: 310px; height: 150px; margin: 0 auto"></div>
<h3>10px bigger and all 5 yaxis labels visible</h3>
<div id="container2" style="min-width: 310px; height: 170px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
crop:false
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
crop:false
}
},
series: {
dataLabels:{
crop:false}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
$(function () {
$('#container2').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
crop:false
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
crop:false
}
},
series: {
dataLabels:{
crop:false}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
You can set step parameter as 1,
labels: {
step:1,
}
http://jsfiddle.net/VbecE/7/
I want to reduce space between bar chart series data. Below mentioned is the image which gives a clear picture :
Can anyone suggest the best approach to do it?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635],
pointWidth: 22,
}, {
name: 'Year 1900',
data: [133, 156, 947],
pointWidth: 22
}]
});
});
http://jsfiddle.net/fMdk3/5/
The options you want to play with are pointPadding (padding between bars) and groupPadding (padding between seies).
e.g.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0.1,
}
},
e.g. http://jsfiddle.net/BZzWQ/