Highcharts - stop Y axis value change on redraw - javascript

When the graph redraws (zoom or resize), the Y axis values change (the max value changes) leaving a big white gap on the top of the graph (no data).
Here's a JsFiddle of the problem (with both real and fake data, same result) and some pictures of my actual graph.
These are my options for that chart :
var chartOptions = {
title: false,
xAxis: {
lineWidth: 0,
type: 'datetime'
},
yAxis: [{
lineWidth: 0,
},
{
lineWidth: 0,
opposite: true,
}],
tooltip: {
shared: true
},
series: [{
name: 'A',
yAxis: 0,
type : "area",
},
{
name: 'B',
yAxis: 1,
type : "area",
},
{
name: 'C',
type : "spline",
yAxis: 0,
}],
plotOptions: {
area: {
threshold: null
},
},
chart: {
zoomType: 'x',
},
legend: {
enabled: false
},
};

You can set alignTicks as false. Example: http://jsfiddle.net/b1vrvn2q/9
chart: {
zoomType: 'x',
alignTicks:false
},

Related

Failing to display more ticks in the Highcharts histogram

I am trying to display more ticks in my histogram. To be more specific, I would want the first tick to be -0.5 and other ticks be spaced 0.05 from each other (-0.5, -0.45, -0.4 ...) so that the last tick is 0.5. Could someone help me with implementing this to my code?
var data = [];
for (var i = 0; i < 1000; i++) {
data.push(Math.random() - 0.49);
}
Highcharts.chart('container', {
title: {
text: 'Return distribution'
},
legend: {
enabled: false
},
xAxis: [
{
title: {
text: 'Asset 1'
},
alignTicks: false,
visible: false
},
{
title: {
text: 'Portfolio returns'
},
alignTicks: false,
opposite: false
}
],
yAxis: [{
title: {
text: 'Asset 2'
},
visible: false
},
{
title: {
text: 'Frequency'
},
opposite: false
}
],
plotOptions: {
histogram: {
// binsWidth: '', takes precende over binsNumber
binsNumber: 20
}
},
series: [{
name: '',
type: 'histogram',
visible: true,
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1,
color: ''
}, {
name: '',
type: 'scatter',
data: data,
id: 's1',
visible: false,
marker: {
radius: 1.5
}
}]
});
If I insert
min: -0.5,
max: 0.5,
tickInterval: 0.05
to the xAxis config. the script won't work
Link to jsfiddle: http://jsfiddle.net/lauri1/5wgfoebs/60/
To show first and last ticks you can set xAxis options startOnTick and endOnTick.
xAxis: [{
startOnTick: true,
endOnTick: true
}
]
In that case, setting xAxis.tickInterval to 0.05 it's working as you wished.
DEMO: http://jsfiddle.net/BlackLabel/y79mor0q/

Highcharts how to add treemap upon click event on line chart?

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click

how to disable highcharts animation on panning but still using on load

on highchart 8.0.0 is possible zoom using the wheel
the problem is highcharts do an animation on scroll
I red the documentation but I only found disable all animations
is it posible do that?
$('#container').highcharts({
chart: {
panning: true
},
mapNavigation: {
enabled: true,
enableButtons: true
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
here is in jsfiddle
https://jsfiddle.net/xm3692y8/2/
thanks in advance
best
I think that set chart.animation to false is a solution which you are looking for. It will disable animation for all chart updating, but the initial one will stay unchanged.
Demo: https://jsfiddle.net/BlackLabel/jLm8yrt6/
chart: {
panning: true,
animation: false
},
API: https://api.highcharts.com/highcharts/chart.animation
Is that what you had in mind?

Plot float up & down beyond y-axis in StockChart while dragging navigator

Here is my js code:
Highcharts.stockChart('utilizations', {
chart: {
zoomType: 'x'
},
title: {
text: 'KPI'
},
subtitle: {
text: 'CCE & PRB Utilization (%)'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '1w'
}, {
type: 'day',
count: 14,
text: '2w'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
yAxis: {
labels: {
formatter: function () {return this.value + '%';}
},
max: 100,
min: 0,
tickInterval: 20,
plotLines: [{
value: 0,
width: 2,
color: 'silver'
},{
value: 70,
width: 1,
color: 'red'
}]
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
series: {
compare: 'value',
showInNavigator: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'CCE Util',
type: 'spline',
yAxis: 0,
data: (function(){
var data = [];
for (var i = 0; i < result.length; i++) {
var time = result[i]["time"];
var kpi = result[i]["cce"];
data.push([time, kpi]);
}
return data;
})(),
tooltip: {
valueSuffix: '%',
valueDecimals: 2,
split: true
}
},{
name: 'PRB Util',
type: 'spline',
yAxis: 0,
data: (function(){
var data = [];
for (var i = 0; i < result.length; i++) {
var time = result[i]["time"];
var kpi = result[i]["prb"];
data.push([time, kpi]);
}
return data;
})(),
tooltip: {
valueSuffix: '%',
valueDecimals: 2,
split: true
}
And my plot:
While dragging the navigator bar, sometimes the plot goes to the right position and sometimes it looks like the capture above. According to my experience, the plot position is related to the left end (let's note this as A) position of the navigator selector. When A is on the lowest part of the whole plot in navigator, the shown plot positioned well; and when A goes like the capture above, the plot shown sunk.
Please refer to a short demo with 100 data here: https://jsfiddle.net/ghqyvo0x/
How can I make my plot stable?
Your problem is caused by series.compare: property, which you set in plotOptions configuration object. If you delete this line of code, everything should work as you need. We could read in Highstock API:
Compare the values of the series against the first non-null, non- zero value in the visible range.
plotOptions: {
series: {
//compare: 'percent',
showInNavigator: true
}
}
JSFiddle example
API Reference

Not able to correctly plot x-axis in HighChart

I am new to highChart and even after following the documentation I am not able to correctly plot the x-axis. It only labels the the first element of the dateAndTimeArray array.Can you please tell me where I am making mistake. Here is my code.
JSON Array
var jsonObj=[ {
name:"Nov-10 18:00",
data:[50],
type:'column'
},
{
name:"Nov-20 20:00",
data:[60],
type:'column'
},
{
name:"Nov-10 22:00",
data:[70],
type:'column'
},
{
name:"Nov-12 20:00",
data:[80],
type:'column'
}]
HighChart related code
dateAndTimeArray = ['Nov-15 18:00', 'Nov-20 20:00', 'Nov-11 22:00', 'Nov-12 20:00'];
var seriesData=jsonObj;
console.log(seriesData);
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 10
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 00,
labels: {
formatter: function() {
return this.value.toString().substring(0, 6);
},
rotation: 0.1,
align: 'left',
step: 10,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series:jsonObj
});
DEMO
The chart is plotting what you asked it to. You have 4 series of data. Each series has one data point. I think you confusing the series.name and xAxis point. Since each of your series has just one point it is assigned to the first category in your xAxis.categories.
The question then becomes:
Do you want to have a categorical xAxis or a datetime xAxis?
Your data leads itself to categorical but your xAxis.categories don't line up with your series.name entries and your xAxis.categories are not in ascending time order. You also are setting a categorical list of items but telling highcharts that your chart is type: 'datetime'. You need to pick one.
Here is an example using categorical type.
Here is an example using datetime type.

Categories