I have a chart with two yaxis but can't get the second data series to scale to the second axis. What am I missing?
Example: https://jsfiddle.net/32yugp6m/2/
Now I see where the problem is. You have set the series.yaxis to 1 and 2, meanwhile, it needs to be set as series.yAxis 0 and 1. Notice that Axis must be started with capital letter.
Demo: https://jsfiddle.net/BlackLabel/8u2rhegv/
series: [{
name: 'Deg F.',
type: 'line',
yAxis: 0,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 70.8],
[Date.UTC(2020, 1, 22, 12, 1), 70.8],
...
],
},
{
name: 'RH',
type: 'line',
yAxis: 1,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 33.4],
[Date.UTC(2020, 1, 22, 12, 1), 33.4],
...
],
}
]
API: https://api.highcharts.com/highcharts/series.line.yAxis
Related
When last value in left stepped area is different from previous one it is hard to see it. (we just see a line along the end of the chart)
Demo:
https://jsfiddle.net/x2qf5wuy/1/
$("#container").highcharts({
chart: {
type: 'area'
},
plotOptions: {
area: {
stacking: 'normal',
step: 'left'
}
},
series: [{
name: "Example 1",
data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
}, {
name: "Example 2",
data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
}]
});
There is a way in highchart to add an artificial padding to data series so that the user can see the last point ?
Wanted result :
You can add a point with the same y value as the last series point and use the setExtremes method to show only the wanted part of the area:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series[1],
lastPoint = series.data[series.data.length - 1];
series.addPoint({
x: lastPoint.x + 100,
y: lastPoint.y
}, false);
this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/54a6jdgy/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I am using highcharts graphs, Start point of highcharts is showing in my laptop (maximum resolution: 1920*1080).
But when I am an open same graph in a lower system: maximum resolution (1368*768) That time the first point of x-axis not showing
Note : Given image is not match with data but graph is same.
CODE :
$('#call_cc_graph_data').highcharts({
chart: {
type: 'spline',
zoomType: 'x'
},
title: {
text: 'CPS vs Time'
},
xAxis: {
type: 'datetime',
min : 1533873600000,
max : 1533945599000,
},
series:[{
name: 'CC',
data: [[1533876120000,1],[1533876240000,1],[1533876840000,2],[1533876900000,1],[1533877200000,7],[1533877260000,4],[1533877320000,1]]
}]
});
Expected result of image : It needs to show value 05:00 on starting point of x-axis.
Try with xAxis.startOnTick Doc and maybe xAxis.tickInterval Doc
xAxis: {
type: 'datetime',
min : 1533873600000,
max : 1533945599000,
startOnTick:true,
tickInterval:3600 * 1000 // If 2 hours step is too large
},
Fiddle
You can change default xAxis units option:
xAxis: {
type: 'datetime',
units: [
[
'second', [20, 40]
],
[
'minute', [1, 2, 5, 10, 15, 30]
],
[
'hour', [1, 2, 3, 5, 6, 8, 12]
],
[
'day', [1, 2]
],
[
'week', [1, 2]
],
[
'month', [1, 2, 3, 4, 6]
],
[
'year',
null
]
],
min: 1533876120000,
max: 1533945599000
},
Live demo: http://jsfiddle.net/BlackLabel/pskqo6ad/
API: https://api.highcharts.com/highcharts/xAxis.units
Similar problem: https://github.com/highcharts/highcharts/issues/5437
I am trying to plot column + line chart combined using Highcharts.
Similar to this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/
but, I wanted to plot the line points per bar instead of per xAxis label. Not sure if this is even doable?
I tried to give it a shot but no success!
https://jsfiddle.net/e5e6bcfL/6/
Here is the xAxis categories and series data:
xAxis: {
categories: ['John', 'Ginni', 'Vicki', 'Alan', 'Alic']
}
...
series: [{
name: 'Male',
data: [10, 1, 8, 7, null]
}, {
name: 'Female',
data: [null, 12, 9, 2, 7]
},
{
yAxis: 1,
name: 'avgAge',
type: 'spline',
// this data is per xAxis category and per name/legend
// eg John Male avgAge is 35, Ginni Female avgAge is 30
data: [35, 18, 30, 28, 26, 32, 25, 36]
}]
Any help is appreciated.
I got a little problem in HighStocks: I have two area series which are stacked. The problem: In the navigator at the bottom, just the first series is shown, not the resulted stacked chart.
(see http://jsfiddle.net/Je8eG/)
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
series: [{
name: 'Series 1',
data: [
[Date.UTC(2010, 0, 1, 10), 53.5],
[Date.UTC(2010, 0, 1, 10, 30), 59.5],
[Date.UTC(2010, 0, 1, 11), 53.5],
[Date.UTC(2010, 0, 1, 12), 28.5],
[Date.UTC(2010, 0, 1, 13), 55.2]
],
type: 'area'
}, {
name: 'Series 2',
data: [
[Date.UTC(2010, 0, 1, 10), 29.9],
[Date.UTC(2010, 0, 1, 10, 30), 29.9],
[Date.UTC(2010, 0, 1, 11), 29.9],
[Date.UTC(2010, 0, 1, 12), 61.5],
[Date.UTC(2010, 0, 1, 13), 53.4]
],
type: 'area'
}]
});
Is there a fix or workaround?
Something like this is not supported. You can set specific series to a navigator, so I advice to sum on your own stacked series, and then pass to navigator, see: http://api.highcharts.com/highstock#navigator.series
I need my yaxis in highcharts to always start on 1, not 0. My data sets are whole numbers with 1 being the lowest, i've tried everything combination on min, minrange startontick, that I could think of. The only way I was able to get the yaxis to show 1 instead of zero is with the snippet below. I basically hid the 0, then set a custom label for that plot band giving it a label of 1. Is this the only way?
yAxis: {
min:1,
showFirstLabel: false,
allowDecimals : false,
reversed: true,
plotBands: [{
color: '#EBFAEB',
from: 0,
to: 10,
label: {
text: '1',
style: {
color: '#000000',
},
align: 'left',
verticalAlign: 'top',
y: 0,
x: -15
}
}],
Sample data i'm using
series: [{
name: 'Tokyo',
data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13, 9]
}, {
name: 'New York',
data: [13, 2, 1, 11, 17, 22, 24, 24, 20, 14, 8, 2]
}, {
name: 'Berlin',
data: [1, 3, 3, 8, 13, 17, 18, 17, 14, 9, 3, 1]
}, {
name: 'London',
data: [3, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4]
}]
It's probably because your tickInterval scales to something such that it wont' start at 0. min:1 should work if you give it an appropriate tickInterval.
Alternatively min:1 combined with startOnTick: false should also work.
EDIT:
I just tried the following combination myself and it works for me. If you tried this before and it didn't work for you then the issue is probably that you the proper case for the different options:
min: 1,
startOnTick: false,
tickInterval: 10
see: http://jsfiddle.net/Reality_Extractor/kTmqg/
Have you tried to use tickPositioner?
http://api.highcharts.com/highstock#yAxis.tickPositioner