react-highcharts yAxis max/ceiling not working with many axis - highcharts

I'm using react-highcharts, I have a graph with 2 yAxis one of these is a percentage and doesn't make sense to have values higher that 100%.
I'm trying to set 100 as a max value.
http://take.ms/lYjkT
(120% and 6 values are unnecessary)
I tried using
- yAxis.max: 100 and yAxis.min: 0
- yAxis.ceiling: 100 and yAxis.floor: 0
- yAxis.maxPadding: 0, yAxis.minPadding: 0
also I tried using yAxis.tickInterval, yAxis.minRange, yAxis.endOnTick but nothing works.
Other thing I tried is to use
- chart.alignTicks: false
and it looks better
http://take.ms/2PLiL
But 0 should be at bottom of the graph, also I prefer to use alingTicks:true and cut the unnecessary values.
This is the config I'm using
yAxis: [{
gridLineWidth: 0,
title: {
text: '',
style: {
color: window.Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}',
style: {
color: window.Highcharts.getOptions().colors[1]
}
},
},
{
gridLineWidth: 0,
maxPadding: 0,
minPadding: 0,
minRange: 100,
ceiling:100,
floor: 0,
title: {
text: '',
style: {
color: window.Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value}%',
style: {
color: window.Highcharts.getOptions().colors[1]
}
},
opposite: true
}]
Do you know how to do it work?

Related

Highcharts - Combine y axes

Is there a way to combine different y axes into one?
I have 23 data sets that I want to display on the same line graph and I want it to only have one y axis, despite the fact that the different lines' values highly differ (for example, points in one line can fluctuate around 50 000 and in another line around 5 or 6).
What I am looking for is this:

You can mock multiple y axes to be shown as one. One main axis should have line and ticks, the other should not - you can set that with tickWidth, tickLength and lineWidth options (for each axis separately).
Then you need to set vertical position of the axes by setting their offset to 0. You also need adjust their min, max and tickPositions to fit the data.
Example of the axes config:
yAxis: [{ // Primary yAxis
min: 4.5,
max: 27.5,
tickPositions: [7, 25],
startOnTick: false,
endOnTick: false,
gridLineWidth: 0,
offset: 0,
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: null
},
}, { // Secondary yAxis
gridLineWidth: 0,
offset: 0,
title: {
text: null
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
lineWidth: 1,
tickLength: 10,
tickWidth: 1,
tickPositions: [49.9, 220]
}, { // Tertiary yAxis
gridLineWidth: 0,
endOnTick: false,
startOnTick: false,
min: 1009,
max: 1018.5,
tickPositions: [1009.5, 1018],
offset: 0,
title: {
text: null
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
example: http://jsfiddle.net/w7z1p8qy/

Forcing yAxis.max is not respected in Highcharts

...or what is my fault?
I am trying to set the yAxis.max values on both axis. But it doesn't work.
The left yAxis should go from 330-410 with a tickInterval of 10, the right one from -0.6-1,1 with a tickInterval of 0.1.
Here is a fiddle.
yAxis: [{
labels: {
style: {
color: "#4553c5"
}
},
title: {
text: "ppm",
align: "high",
rotation: 0,
x: 10,
y: -30,
textAlign: 'left',
style: {
color: "#4553c5"
}
},
min: 330,
max: 410,
tickInterval: 10,
gridLineWidth: 1,
gridLineColor: '#efefef',
endOnTick: false
}, {
labels: {
style: {
color: "#ec5d61"
}
},
title: {
text: "°C Anomaly",
align: "high",
rotation: 0,
textAlign: "right",
x: -10,
y: -30,
style: {
color: "#ec5d61"
}
},
min: -0.6,
max: 1.1,
tickInterval: 0.2,
gridLineWidth: 1,
gridLineColor: '#efefef',
opposite: true,
endOnTick: false
}],
What is wrong with it? Thanks for any hints!

When using a dual axis, min and max get confounded by the default alignTicks setting.
Setting alignTicks to false will usually fix the problem
chart: {
alignTicks: false
},
Example:
http://jsfiddle.net/jlbriggs/9hnx0w46/6/
OTOH, using a dual y-axis chart like this is generally a bad idea, as it confounds two series whose interactions don't mean anything, since they are being measured on two different scales.
Useful read on the subject:
https://www.perceptualedge.com/articles/visual_business.../dual-scaled_axes.pdf

When you use multiple yAxis, min and max values usually calculated by HighCharts and these calculated values overrides your settings.
The trick is using tickAmount, startOnTick and endOnTick together.
Here is the solution of your problem: jsFiddle

Highcharts: multiple yAxes labels overlap

I've got a chart where there are multiple yAxes and labels that overlap. I cannot instantiate them with different x values because I've got a UI that will switch the axes on and off, so that would leave weird spacing to one of the labels. I want to use formatter to detect if the label is not a first label and then change the x value then, but I have trouble finding how to change the value in formatter callback. Below is my code
{
title: 'Count',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'right',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
}
},
opposite: true,
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
{
title: 'Cost',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'left',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
},
formatter: function() {
if ( this.isFirst ) { console.log("first") }
this.attr({ x:44 })
}
},
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
Any ideas?

Both of your yAxis should have order in which you want to show them.YAxis needs to be stacked. Use
yAxis:0, //for first series
yAxis:1 //for second series
I Will add a fiddle in few mins.

0 value column chart - highchart

How do I make a slight shadow or color come up below the x axis for zero valued points in column charts?
Right Now nothing is shown.
Setting the minPointLength property makes a line come up above the x Axis.
Any help or pointers would help.
Below are my options:
plotOptions: {
column: {
shadow: false,
pointWidth: 11.5,
borderWidth: 0.5,
enableMouseTracking: false,
minPointLength: 1
}
},
yAxis: {
labels: {
align: 'left',
style: {
color: 'gray',
fontWeight: 'normal',
fontSize: '8.5px',
fontFamily: 'Arial'
}
},
minorGridLineWidth: 1,
minorTickInterval: 10000,
minorGridLineColor: 'white',
minorTickWidth: 0,
title: {
text: '',
rotation: 270.0,
style: {
fontWeight: 'normal'
},
margin: 20,
style: {
fontWeight: 'normal',
fontFamily: 'Arial',
color: '#666666',
fontSize: '11px'
}
},
opposite: true,
min: 0,
max: 500000,
tickInterval: 100000,
gridLineWidth: 0.0
}
This gives me a 1px point above x Axis.
But what I am looking for is a small shadow/1px point below the xAxis.

The only way I have found to accomplish something like this is to convert 0 values to negative values (I have most often done something where I have a very small column that goes from -1 to 1, straddling the 0 line)
How large of a spread your data has will determine what negative value you need to specify.
http://jsfiddle.net/jlbriggs/JVNjs/307/
data: [7,12,16,-1,32,64]
{{Edit:
updated example with startOnTick:false - http://jsfiddle.net/jlbriggs/JVNjs/309/

Dates instead of values on Highchart labels in graph with multiple axis

I've created a line and a bar graph that share the xAxis. But for some reason it chooses to display the value instead of date, even though I am supplying it the standard way.
What am I missing here?
Fiddle: http://jsfiddle.net/ZfP84/
$(function () {
var options = {
chart: {
renderTo: 'container',
},
navigator:{
enabled:true
},
scrollbar: {
enabled:true
},
rangeSelector: {
enabled: true,
//selected: 1
},
xAxis: {
gridLineWidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [
{
height: 150,
lineWidth: 2,
offset: 0,
title: {
text: 'Price',
}
},
{
top: 225,
//lineWidth: 0,
//min: 0,
//max: 5,
gridLineWidth: 0,
offset: 0,
height: 100,
title: {
text: 'Volume',
}
},
],
series: [
{
yAxis: 0,
name: 'Price by time',
stack: 0,
//data: [1, 12, 32, 43],
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valueDecimals: 2
},
},
{
name: 'Volume by time',
yAxis: 1,
stack: 0,
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valueDecimals: 2
},
lineWidth: 3,
marker: {
enabled: false
},
type: 'column',
},
]
};
var chart = new Highcharts.Chart(options);
});

If you added the the "type" to the xAxis definition then the x values will be interpreted as dates and times rather than decimal values
xAxis: {
type : "datetime", //add this line
gridLineWidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
you may have to fiddle with the start times and intervals to get HighChart to correctly interpret your x-values.
see this demo on the highchart website as an example. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/

The reason is that you are not actually creating a Stock chart. Your code looks like:
var chart = new Highcharts.Chart(options);
If you want it to be a Stock chart do:
var chart = new Highcharts.StockChart(options);
A Chart by default is a category chart. StockChart is time-based.

You can use dateFormat to replace time in miliseconds with date.
http://jsfiddle.net/3bE4X/
formatter:function(){
return Highcharts.dateFormat('%d / %m / %Y',this.value);
}
http://api.highcharts.com/highcharts#Highcharts.dateFormat()

Resources