Highcharts x axis dates displayed slanting - highcharts

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

Highcharts: align markers with xAxis

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

how to resolve overlapping labels on x-axis (highcharts)

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 ?

One Average Spline for each Column in Highcharts Combination Chart

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/

Highcharts: bar/column chart label position with values of 0

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.

High charts not displaying date correctly in x axis per epoch?

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

Resources