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
Related
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
I'm using Highchart to generate a line chart with data labels. Here is an example of what I'm doing:
Highcharts.chart('container', {
title: {
text: 'Chart without categories'
},
xAxis: {
categories: ['a','b'],
},
series: [{
data: [1,2]
}]
});
This code generates the following chart: As you can see, there is a space between the line and and the borders of the chart.
Without using categories, there is no space:
What can I do to remove this spaces?
That is a default behavior of category axis type. Please check this example: http://jsfiddle.net/BlackLabel/wuqxb2cy/ with a more visible distribution into categories.
As a solution you can set xAxis.tickmarkPlacement and series.pointPlacement to 'on':
xAxis: {
categories: [...],
tickmarkPlacement: 'on'
},
series: [{
data: [...],
pointPlacement: 'on'
}]
Live demo: http://jsfiddle.net/BlackLabel/qkezc3mx/
API Refefence:
https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/series.line.pointPlacement
I need to make a combination of draggable line chart and treemap.
See here: JSFiddle example
Highcharts.chart('container', {
series: [{
type: "treemap",
data: [
{id: "NS",name: 'NS_area', value:5},
// ...
}
},{
data: [[0, 100], [10,90.9], [20,81.8], [30,72.7]],
type: 'line',
}]
});
can I display x,y axis when using treemap? Do you have other idea how to combine both charts?
One workaround that might work for you is adding an additional axis and simply linking it to the original one.
For example, creating one "duplicate" x-axis and y-axis:
xAxis: [{
},{
linkedTo: 0
}],
yAxis: [{
}, {
linkedTo: 0
}]
See this JSFiddle demonstration of it in use. This makes the axis mimic the look you originally had.
If you want the line chart to be completely independent of the original axis, you could just do the following:
series: [{
// ...
}, {
data: [[0, 100], [10,90.9], [20,81.8], [30,72.7]],
type: 'line',
yAxis: 1,
xAxis: 1,
// ...
}],
xAxis: [{
},{
}],
yAxis: [{
}, {
}],
See this JSFiddle demonstration of it in use. This works as a completely separate axis.
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'm using a stacked percentage bar chart in Highcharts. (This jsfiddle is similar to our chart, derived from an example on the Highcharts site.)
What I'd like to do is add another set of "category" labels on the right side of the chart. Where the left side has labels for each bar, I'd like to show an average on the right. (Calculating this average and putting it in the Highcharts configuration data is done on the server side; in the fiddle I've just hard-coded some dummy values.)
I've tried using multiple x-axis configurations, with the averages categories marked opposite: true to put them on the right side. I can see that adding this is changing the chart, especially if I don't put them on opposite, but the labels don't actually show in any configuration I've tried. Is this possible? If so, what do I need to do that I'm not yet doing?
This is the configuration in the jsFiddle example:
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, {
title: 'Avg.',
categories: [3.0, 3.3, 3.6, 2.6, 3.0],
opposite: true
}],
yAxis: {
min: 0,
title: {
text: 'Percent fruit consumption'
}
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
You have the correct axis set up, but currently the chart doesn't know what to do with the second axis.
Highcharts requires that an axis has either a data series attached to it, or that it is linked to another axis that does, in order to display it.
If you add a linkedTo property, it will work as required:
xAxis: [{
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, {
linkedTo: 0, // <-- now the chart will show it, as long as axis 0 is able to be shown
title: 'Avg.',
categories: [3.0, 3.3, 3.6, 2.6, 3.0],
opposite: true
}]
Updated fiddle:
http://jsfiddle.net/jlbriggs/z4zkm8v5/2/