Have bar chart with many many entries on xAxis. But they are too close to each other.
Example: http://jsfiddle.net/XUsCq/
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania'],
title: {
text: null
}
},
Data is too dense.
change your container div in something like that:
<div id="container" style="min-width: 400px; margin: 0 auto; height: 800px"></div>
You can change the style for the dataLabels as:
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
fontSize: "8px"
}
}
}
}
But that wont solution the problem if you have a lot of data anayway.
The best option would be resize the container according to the number of elements you are showing.
Here is a Fiddle link to inspire you:
Fiddle
Your basic problem is that you have too much data to fit in the available space.
There are some highcharts options which can help: groupPadding and pointPadding in the plotOptions
groupPadding:0,
pointPadding:0,
Howver, the best thing you can do is make the chart a bit taller by setting a larger height on the containing div:
http://jsfiddle.net/eEHFH/
Related
I am trying to create a piechart using highcharts. And I am facing one problem: The sticks that are denoting the contents are not editable, meaning I am not able to customize it, say giving a different color or make the stick size small/big or thin/thick whatever.
Here is the code. Please help me to resolve.
Highcharts.chart('container', {
chart: {
type: 'pie'
},
series: [{
data: [29.9, 71.5],
color: '#000'
}]
});
You can set colors globally as
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655', '#FFF263', '#6AF9C4'
],
});
Or you can override global colors in series
series: [{
data: [{
name: 'Firefox',
y: 44.2,
color: "#fff"
},
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
Change size of connector
plotOptions: {
pie: {
dataLabels: {
connectorWidth: 20
}
}
},
fiddle demo
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
I am plotting the values dynamically in highcharts column charts. I have displayed the data labels with -90 degree rotation to avoid the overlapping. But It has some issues like the values are cut off by the axis.
I have tried the y offset option. But The values are plotted dynamically. So I couldn't set this value as fixed one.
JS Fiddle : a link
Highcharts.chart('container', {
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', 2341.7],
['Lagos', 165.1],
['Istanbul', 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: {
useHTML:true,
crop:false,
enabled: true,
rotation: -90,
color: '#000000',
inside:true,
style: {
fontFamily: 'Verdana, sans-serif',
fontWeight: "bold"
, fontSize: "15px"
}
}
}]
});
`
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto">
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
`
Setting the align attribute to "left" could work.
dataLabels: {
align: "left"
}
See here: https://jsfiddle.net/t15eg1qm/3/
Try to set yAxis type to logarithmic, and its minorTickInterval to 0.1. Logarithmic scale fits to this type of data perfectly. Lets look at code below:
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1,
title: {
text: 'Population (millions)'
}
},
Here is your refactored JSFiddle: https://jsfiddle.net/daniel_s/x5oxyt2v/
Best Regards!
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.
I want an area chart with opacity 0.1. If I do not specify the color, everything works fine:
plotOptions: {
series: {
fillOpacity: 0.1
}
}
series: [{
name: '1',
data: [1,2,3],
type: 'area'
}
But when I change the color, the opacity is ignored:
plotOptions: {
series: {
fillOpacity: 0.1
}
}
series: [{
name: '2',
data: [0,1,2],
type: 'area'
color: 'red'
}
See http://jsfiddle.net/4HkXf/
Please use color as hex i.e "#ff0000" instead of 'red'.
http://jsfiddle.net/4HkXf/3/
I resolved it by removing fillOpacity, and instead specifying opacity as part of the color using rbga:
series: [{
name: 'Buy / Sell ',
data: data.shares_change,
type: 'column',
color: 'rgba(0,128,0,0.4)', // #080
negativeColor: 'rgba(128,0,0,0.4)', // #800
pointWidth: 8
}]
fillOpacity: 0.1,
color: "rgb(0,0,0)"
seems to work on all browsers
fillOpacity: 0.1,
color: "#000"
does not work on all browsers
color: "rgba(0,0,0,0.1)"
does not work on all browsers
I can't say exactly what the reason is.
but, here is the solution for it
use type in chart level
chart:{
type: 'area'
}
this will be applied to all the series
here is your updated fiddle http://jsfiddle.net/4HkXf/1/
hope this will be of some use to you.