Im using Highcharts to generate a line chart. On my x-axis, I use dates and its all displaying but for some reason its displaying slanting.
How can I fix it? Here is my x-axis properties.
xAxis: {
categories: report_2_weekly_categories,
tickInterval: 180,
labels:{
format : '{value} CST'
}
},
Related
I have a type area chart, with minor grid lines and a datetime xAxis. data is feed through an array of y values, and I got to render xAxis labels depending on the data length successfully.
My issues are:
the chart has a unwanted padding on the X axis
the markers don't align with their labels
Check it:
Here's a working fiddle: https://jsfiddle.net/fernandaparisi/e07q32ay/53/
I noticed that if I remove all the max, min, tickInterval, pointStart and pointInterval properties the markers are aligned correctly, but the chart doesn't expand its full available width.
margin and spacing chart properties seem to affect the chart as a whole, and not the plotted area.
Any thoughts?
The padding is caused by combined tickInterval and endOnTick: true, to remove it just disable endOnTick.
To position the labels in a different way use align, x and y properties.
xAxis: {
labels: {
align: 'center',
y: 30,
formatter: function() {
return Highcharts.dateFormat('%e %b', this.value);
},
rotation: -45
},
title: undefined,
type: 'datetime',
min: lastSunday - (weekLength * (data.length - 1)),
max: lastSunday,
tickInterval: weekLength,
endOnTick: false,
minorTickInterval: weekLength
}
Live demo: https://jsfiddle.net/BlackLabel/eLbp48d3/
API Reference:
https://api.highcharts.com/highstock/xAxis.labels.align
https://api.highcharts.com/highstock/xAxis.endOnTick
I am using the highcharts library.
I have set the xaxis as a datetime axis.
I am in a situation where the ticks on x-axis are overlapping.
http://jsfiddle.net/owge98Lm/
Setting "tickPixelInterval" didn't help:
xAxis: {
type: 'datetime',
labels: { rotation: 45 },
tickPixelInterval: 50
},
Any suggestions ?
i am quite new to Highcharts and i am a little bit stucked.
I am trying to add a average line (spline) to each bar (column) in a combination chart. The average line shall not be displayed in the middle, it sall be displayed over the related bar, as i tried to show in this picture.
picture to explain
Thanks a lot!
You can add new xAxis that you can use to add your spline series in right places.
xAxis: [{
min: 0,
max: 3,
categories: ['Jan', 'Feb', 'Mar', 'Apr'],
tickPixelInterval: 0
}, {
categories: true,
min: 0,
max: 19,
visible: false
}],
In this case I am making the second xAxis much more dense. Here you can see how both of my axes looks here:
http://jsfiddle.net/feqq1eog/1/
To hide second axis you can use visible: false parameter.
Here you can find an example how it can work:
http://jsfiddle.net/feqq1eog/4/
If I have a Highcharts bar or column chart that has a data series with an array of all zeroes, the y axis tick label displays in the center of the y axis, along with an extra y axis. I've experimented with the tick placement and min values but these dont seem to work in the case of this peculiar set of data. see http://jsfiddle.net/davidpmcintyre/mepd17tn/
Here's the highcharts code snippet:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr' ]
},
series: [{
data: [0, 0, 0, 0]
}]
});
});
Assuming (given requirements of your chart):
All data will be positive
You always want to start from 0 on the y-axis
The following code will allow you to left-align your y-axis, and also specify how much of the y-axis you want to show in minimal cases (JSFiddle):
yAxis: {
min: 0,
minRange: 1
}
This will still allow you to have larger ranges on the y-axis as it only kicks in when the value range is less than one. This in turn means you do not have to check your data before setting any values.
Two Part Q:
Why is high charts not correctly aligning and displaying the following date on the x axis?
How can I align the date on the x axis with the points in each series?
I have tried adjusting to tickinterval to various values but to no avail on either issue.
tickPixelInterval: 200
Fiddle->http://jsfiddle.net/EwpWh/
Use datetime axis instead of linear, see: http://jsfiddle.net/Fusher/EwpWh/5/
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
},
tickPixelInterval: 200
},
However if you want to have ticks exactly in the same place as points are, you need to use one of:
tickPositions: http://api.highcharts.com/highstock#xAxis.tickPositions
tickPositioner: http://api.highcharts.com/highstock#xAxis.tickPositioner