For some reasons, I need to use Highstock (navigator, crosshair, annotations...).
And I need to display a graph with numerical values for X axis.
In this simple example, the X Axis looks chaotic, and numeric values are not placed/spaced as expected.
Highcharts.stockChart('container', {
rangeSelector: {
enabled: false
},
navigator:{
enabled: true
},
xAxis: {
labels: { formatter: function () {return this.value;}},
crosshair: {
width: 1,
color: 'black'
}
},
series: [{
type: 'areaspline',
data: [
[10, 30],
[20, 25],
[25, 22.5],
[30,20],
[40,15]
]
}]
});
JSFiddle example:
Here
1/ What should I do to get a graphic like this?
Normal X axis with numerics
2/ I can see the line is smoothed. How can I disable this smoothing?
Disable the ordinal option:
xAxis: {
ordinal: false,
...
}
Live demo: https://jsfiddle.net/BlackLabel/q6xv7koh/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
Related
In short, I need to somehow enable groupPadding for stacked series. It looks a little bit odd, but this is what you can do in PowerPoint if you set series overlap to 0:
With series overlap set to 100, they would be on top of each other like in Highcharts with stacking set to e.g. normal.
To me, it seems you are not allowed to move stacking columns horizontally relative to each other in Highcharts. But maybe I am missing something or there is a workaround?
Thanks!
You can create an additional hidden series with the same stack as the upper series. Example:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
dataLabels: {
enabled: true,
format: '{point.y}%'
}
}
},
series: [{
data: data2,
color: 'gray'
}, {
data: data1,
color: 'rgba(0,0,0,0)',
linkedTo: 'data1',
dataLabels: {
enabled: false
}
}, {
id: 'data1',
data: data1,
stack: 'A',
color: 'green'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/rkvs8cy7/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
When I have multiple x axes in a column chart the max value rendered isn't being computed correctly. Also - zooming doesn't work as expected. Here is a jsfiddle showing the issue - https://jsfiddle.net/ermht671/. Does anyone have an example using 2 x axis with Highcharts?
Highcharts.chart('container', {
yAxis: {
min: 0,
max: 1.1
},
xAxis: [{
minRange: 1
}, {
minRange: 1,
linkedTo: 0,
visible: false
}],
series: [{
name: 'series',
data: [
[0.1, 0.2],
[0.7, 0.4],
[1.3, 0.2]
]
}, {
type: 'line',
xAxis: 1,
name: 'MPO',
data: []
}],
chart: {
type: 'column',
zoomType: 'x'
}
});
The solution here is to set chart.alignTicks to false.
Live demo: https://jsfiddle.net/kkulig/3098h8vd/
API reference: https://api.highcharts.com/highcharts/chart.alignTicks
How can I remove some values from a yAxis?
My chart is a columnrange (https://www.highcharts.com/demo/columnrange) with days on the x axis (actually y axis, rotated), and I don't want show values for some days.
More in general I want hide some values from domain, i.e. a discontinuous domain.
Example:
Highcharts.chart('container', {
chart: { type: 'columnrange', inverted: true },
xAxis: { categories: [ 'FirstTask' ] },
yAxis: {
type: 'datetime',
tickInterval: 24 * 36e5
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () { return Highcharts.dateFormat('%e.%b', this.y); }
}
}
},
series: [{ data: [1497718538701, 1498150538701] }],
});
This code generates a chart with horizontal bar and days from 17 June to 22 June on x Axis (y, rotated).
I want remove days 19 and 20, i.e. all points in interval
[1497891338701, 1497977738701]
Is it possible?
You can use broken axis module to set breaks on an axis.
yAxis: {
type: 'datetime',
tickInterval: 24 * 36e5,
breaks: [{
from: Date.UTC(2017, 5, 19),
to: Date.UTC(2017, 5, 20),
breakSize: 0
}],
It seems that in your case some ticks are overlapping, but it might be fixed with axis.labels.formatter - you can check if the value is outside the break.
labels: {
formatter: function () {
const hide = Date.UTC(2017, 5, 19) <= this.value && this.value < Date.UTC(2017, 5, 20)
return !hide ? this.axis.defaultLabelFormatter.call(this) : null
}
example: http://jsfiddle.net/qhrd9wnw/
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
I would like my chart to start from a set threshold (3 in my example - the middle). If i set my tickPositions in ascending order ([1,3,5]) the chart displays fine.
xAxis: {
categories: ['Cat1', 'Cat2']
},
yAxis: {
tickPositions: [1,3,5]
},
plotOptions: {
series: {
threshold: 3
}
},
series: [{ name: 'Demo', data: [2, 4] }]
But if i set my tickPositions in a descending order ([5,3,1]) it seems like the threshold gets ignored.
yAxis: {
tickPositions: [5,3,1]
},
JS Fiddle link
I would not specify the tickPositions out of order - it is not intended to work that way. Instead, specify them in the proper numeric order, and use the yAxis.reversed property.
Example:
yAxis: {
reversed: true,
tickPositions: [1,3,5]
}
Updated fiddle:
https://jsfiddle.net/jlbriggs/pjuw5jce/4/
Reference:
http://api.highcharts.com/highcharts#yAxis.reversed