I'm using highcharts.js to build bar charts, sometimes with hundreds of data points(bars). How do I remove the white padding that highcharts.js puts on every bar? Check out this fiddle to see the phenomenon I'm talking about. I've tried setting the groupPadding: 0 in the series object but there's still some padding/margin between the bars. Is there anything else I can do? Maybe highcharts.js is the wrong library for this type of plot? any suggestions are welcome, Thanks!
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: dates ,
crosshair: true,
crosshair: true,
minTickInterval: 24
},
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: ticks,
groupPadding: 0
}]
});
});
Found the answer here: http://www.highcharts.com/docs/chart-and-series-types/column-chart
The above documentation shows how to zero out all spacing and I've done this to your fiddle so there are now no gaps. The code to update is your plotOptions call and keep your stacking: 'percent' call:
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
groupPadding: 0,
shadow: false,
stacking: 'percent'
}
}
For any service always have a look in their documentation, chances are they have dealt with most issues you can think of. Usually. :)
Related
currently I am developing chart in my React. I am using Highchart. My problem is when my chart first loaded, the size is not following the container size, when i resize the window then only the chart display correct size.
many solution suggested to use
chart.reflow();
but how to use this in react code?
i have tried
.highcharts-container, .highcharts-container svg {
width: 100% !important;
}
not working
the chart always when initial will look like this
I need the chart fully to the yellow line
My chart code
this.setState({
chartDrawSector: {
chart: {
type: 'column',
height: '600',
events: {
load: function(event) {
event.target.reflow();// i tried this not working also..
}
}
},
title: {
text: 'Sector All'
},
// subtitle: {
// text: 'Source: WorldClimate.com'
// },
xAxis: {
categories: sectorName[0],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: displayMode == 'f' ? 'Figures' : 'Percentage %'
}
},
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} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Ultimate Negative',
data: n30Data[0],
color: 'rgb(100, 30, 22 )'
},
{
name: 'Ultimate Positive',
data: gt30Data[0],
color: 'rgb(27, 79, 114)'
},
]
}
})
Column charts are working fine. But I am facing one issue while viewing the chart values. If two values are having a big difference between them, the lower value is not shown in the charts (which means it is showing there but I am not able to witness it) refer https://jsfiddle.net/g18evj5x/1/:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan'
],
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: [1000]
}, {
name: 'New York',
data: [2]
}, {
name: 'London',
data: [4]
}, {
name: 'Berlin',
data: [6]
}]
});
thanks.
Another solution could be tu use dataLabels Api link like that :
plotOptions: {
column: {
// minPointLength: 2, // You could use both solutions
dataLabels:{
enabled:true
}
}
}
Fiddle
One solution is to set a plotOptions.column.minPointLength (API). For example (JSFiddle):
plotOptions: {
column: {
minPointLength: 2
}
}
This means that the point will have at least that height, and therefore show up in your chart.
I’m building a bar chart with highcharts.js. The x-axis is an array of dates, while the y-axis is an array of numbers from 0-100. I want to display the dates on the X axis but only show ticks when there is a new date. If you look at this fiddle you can see the current plot and how the dates look bad. Look at this fiddle and how it displays the dates in an elegant way. Essentially I want to only show a few ticks on the x-axis while plotting many data points.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: dates ,
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: ticks
}]
});
Add minTickInterval to your xAxis settings:
xAxis: {
categories: dates ,
crosshair: true,
minTickInterval: 24
}
My question is about a column chart i making..
I don't understand why my label are not set on the height..
I try many things but i really don't know..
Here you can find a example :jsfiddle project
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
height: 200
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
offset: 0,
labels: {
useHTML: true,
rotation: 0
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
lineWidth: 0,
tickPosition: 'outside'
},
yAxis: {
gridLineWidth: 0,
plotLines: [{
color: '#DDDDDD',
width: 1,
value: 0
}],
max: 0.92,
labels: {
enabled: false
},
title: {
text: ''
}
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black',
verticalAlign: 'top',
useHTML: true,
y: -20
}
},
},
series: [{
showInLegend: false,
negativeColor: '#F14646',
color: '#00B76C',
pointWidth: 40,
data: [0.01, 0.03, 0.03, 0.05, 0.03, 0.10, 0.11, 0.11, 0.15, 0.92]
}]
})
});
});
Thank you!!
It seems that plotOptions.column.stacking = 'normal' and plotOptions.column.y: -20 are causing most of the trouble. So, firstly you should set plotOptions.column.y: 0 (or remove it). Secondly, you could do one of the following
remove plotOptions.column.stacking entirely if you do not actually need it
some column labels may still be shown inside the bar instead of above, this is because there is not enough space above the column - one option is to set yAxis.max to a large enough value to guarantee space
if you do need stacking, use yAxis.stackLabels.enabled: true instead (and remove plotOptions.column.dataLabels if they interfere)
See the relevant Highcharts yAxis.stackLabels option documentation and their stacked column chart example.
I need to use background fill for column in on my chart. I couldn't put background column over other main used column.
My chart display :
Scripts:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Günlük Endüktif - Kapasitif Ceza Limiti Değerleri'
},
subtitle: {
text: ''
},
xAxis: {
categories: result.DateList
},
yAxis: {
min: 0,
title: {
text: 'Oran (%)'
}
},
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
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
borderRadius: 20,
stacking: 'normal',
animation: true,
grouping: 'false'
},
line: {
marker: {
enabled: false
}
},
series: {
grouping: 'false',
stacking : 'normal'
}
},
series:
[
//{
// name: result.Name,
// data: dynamic_data1,
// type: 'column'
//},
{
name: 'null',
data: [30, 30, 30, 30, 30],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
},
series, {
name: 'Ceza Limiti',
type: 'line',
data: result.Average,
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
I need a result as :
So, where is my mistake in script or what is missing?