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
}
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 fairly new to working with Highcharts. As it is right now I am trying to figure out a way to let the user browse between categories via a drop-down selection.
The chart itself is quite simple: Categories are months, Jan through Dec, and the data arrays are populated by looping through SharePoint list data.
What I am hoping to be able to create is a solution where the user can choose which month to view data for via a drop-down selection. This would have to be done after all data has been loaded into the chart to avoid having to query the service for each selection.
The charts-code itself is very simple:
$('#container3').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: categoryMonthsArray,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
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:.0f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'd1',
data: d1Array
}, {
name: 'd2',
data: d2Array
}, {
name: 'd3',
data: d3Array
}, {
name: 'd4',
data: d4Array
}, {
name: 'd5',
data: d5Array
}]
Any pointers at all would be very much appreciated here!
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. :)
I have a really simple spline chart and I'm trying to show on each tooltip the variation between the selected point and the previous point's value, measured in percentage variation. Basically this is the tooltip format I want to show
I've been looking for a solution but the only thing I came up with was this.
Hope it helps.
This are my chart options:
GeneralChartOptions = {
chart: {
renderTo: 'dummycontainer',
type: 'spline',
zoomType: 'x',
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b \'%y',
year: '%b'
}
},
yAxis: {
title: {
text: ''
},
plotLines: []
},
tooltip: {
xDateFormat: '%m-%Y',
shared: true,
crosshairs: true,
},
exporting: {
enabled: false
},
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2,".",",");
}
},
series: []
}
Thanks for the help, I really appreciate it.
How about look how they do and then try ?
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
plotOptions: {
series: {
compare: 'percent'
}
}
demo