We Keep Coding

How to render x-axis labels in Highcharts without the decimal points?

I need to display my x-axis label as a whole number with percentage without the decimal and a zero before it. I am already using allowDecimals: false but that's not helping it looks like. How can I fix this?
0.10% should render as 10% and etc.
https://jsfiddle.net/samwhite/p01xvw2z/
Highcharts.chart('container', {
chart: {
height: 550
},
title: {
text: 'GME: Absolute Daily Return vs. % of Outstanding Shares Hedged, January 2021',
align: 'left',
style: {
fontSize: '20px',
fontWeight: 'bold',
}
},
subtitle: {
text: 'Data source: OPERA and Bloomberg',
align: 'left'
},
credits: { enabled: false },
xAxis: {
title: { text: '% of Outstanding Shares Needed for Hedging' },
// labels: {
// formatter: function () {
// return this.value.toFixed(2) + '%'
// }
// },
labels: {
format: '{value:,.2f}%'
},
min: -0.01,
max: 0.6,
tickInterval: 0.1,
allowDecimals: false
},
yAxis: {
title: { text: 'Absolute % Change in Price' },
min: -0.01,
tickInterval: 0.5,
labels: {
formatter: function () {
return this.value.toFixed(1)
}
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: '',
color: "#f79646",
data: [[0, -.1489], [0.5, 0.7003]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
marker: {
symbol: 'circle',
fillColor: '#00429d',
radius: 3
},
name: 'Observations',
color: '#000',
data: [
[0.05, 0.08],
[0.05, 0.00],
[0.08, 0.05],
[0.08, 0.01],
[0.05, 0.02],
[0.13, 0.12],
[0.11, 0.00],
[0.35, 0.57],
[0.42, 0.27],
[0.38, 0.11],
[0.22, 0.10],
[0.21, 0.00],
[0.26, 0.09],
[0.48, 0.51],
[0.34, 0.18],
[0.44, 0.92],
[0.43, 1.34],
[0.34, 0.44],
[0.42, 0.67]
],
tooltip: {
valueDecimals: 2
}
}]
});

Something like this?
labels: {
formatter: function () {
return this.value * 100 + '%';
}
},

high charts starting new line from each point

I am using high charts to show energy data but i think due to some negative value high caharts starting a new line from each new point and lines not have any connection between them.
here is the picture of my results.
problem Image
you can see in the image there should be only one line.
here's my data for this.
I have 4 series's to show in graph but here i am only providing one because each line have same issue
var data={'vt':[[1588273200000, 0],[1586372400000, 245],[1586286000000, 200],[1586199600000, 7],[1586113200000, 4],[1586026800000, 1],[1585940400000, 4],[1588186800000, 40],[1585854000000, 7],[1588100400000, 30],[1588014000000, 155],[1587927600000, 38],[1587841200000, 57],[1587754800000, 35],[1587668400000, 66],[1587582000000, 68],[1587495600000, 35],[1587409200000, 40],[1587322800000, 62],[1585767600000, 8],[1587236400000, 37],[1587150000000, 44],[1587063600000, 72],[1586977200000, 13],[1586890800000, 5],[1586804400000, 58],[1586718000000, 90],[1586631600000, 41],[1586545200000, 186],[1586458800000, -498]]};
and here's how i initialize the highcharts object.
$('#'+id).highcharts({
title: {
text: titletext
},
time: {
timezone: 'Asia/Karachi'
},
chart: {
zoomType: 'x',
title: 'Meter 1'
},
xAxis: {
labels: {
formatter:function(){
return Highcharts.dateFormat("%b %e", this.value);
}
},
title: {
text: 'Date'
},
showLastLabel: true,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: 'rgba(255,205,255,0.6)',
minPadding: 0,
gridLineWidth: 0,
offset: 20,
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
endOnTick: true,
},
yAxis: {
gridLineColor: 'black',
gridLineWidth: 0,
title: {
enabled: true,
text: cap
},
labels: {
enabled: true
}
},
tooltip: {
backgroundColor: 'white',
borderColor: 'black',
shadow: true,
style: {
color: 'black',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
},
plotOptions: {
flags: {
shape: 'squarepin'
}
},
series: [
{
name: 'Total kwh',
data: data.vt
},
{
name: 'Day kwh',
data: data.dt
},
{
name: 'Peak kwh',
data: data.pt
},
{
name: 'Off Peak kwh',
data: data.opt
}
],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
enabled: true
},
adjustChartSize: true,
},
exporting: {
filename: titletext+'_'+"<?php echo $_SESSION['username']; ?>"+'_'+todayDate(),
buttons: {
contextButton: {
menuItems: ["viewFullscreen",
"separator",
"downloadJPEG",
"separator",
"downloadXLS",
]
}
}
},
credits: {
enabled: false
}
}
)

You need to provide an external graph value for z-index which will identify its position
Please go through this fiddle link with ur dataset. I have improved ur code.
So you can review it.
https://jsfiddle.net/vishalanand77/f6dnua28/32

You have unsorted data - Highcharts error #15: https://www.highcharts.com/errors/15/
You can sort it in this way:
data.vt.sort(function(a, b) {
return a[0] - b[0];
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4993/

Zoom option in Highchart not working for large amount of data

I need to create a highchart with jquery. I have given the Zoom type as x. The Zoom option in chart is not working when there are large amount of data.
In my X-Axis I will be having date value :
Below is my chart implementation:
// Global chart options
Highcharts.setOptions({
chart: {
borderRadius: 0,
borderWidth: 1,
borderColor: '#DADCE0',
marginRight: 45,
zoomType: 'x',
width: 600,
height: 400
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
minRange: 8 * 24 * 3600000,
labels: {
format: '{value:%m-%d-%Y}', //'{value:%m-%d-%Y}'
rotation: 45
}
},
plotOptions: {
series:{
fillOpacity:0.1
},
spline: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
},
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
}
},
global: {
useUTC: false
}
});
var chartJobCount = new Highcharts.Chart({
chart: {
renderTo: 'container-segementReport',
type: 'areaspline'
},
colors: ['#0D4F8B','#00CCFF', '#ff0000', '#ff69b4','#663399','#ffa500','#006400','#654321'],
title: {
text: 'Segments (Classic)'
},
yAxis: {
title: {
text: 'Production Ratio'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '', ',');
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ' </b> <br/> Date : <b>' + Highcharts.dateFormat('%m-%d-%Y', this.x) + ' </b> <br/> Production Ratio: <b>' + this.y + '</b>';
}
},
series: getProductionRatio() --// This function will get the data for series
});
When I try to zoom the chart, the contents present in the chart gets hided.
Is there anything that needs to taken care in the point interval for X-Axis ?
Thanks in Advance !

highcharts: 3rd Y axis on wrong side

I am trying to plot 3 Y axis with a seperate scale.
The problem is that the Air pressure 'text' of the scale in on the 'opposite' side of the plot (where it should be), but not the 'number' scale.
Here is the Fiddle : link
Code:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
margin: [50,150,90,60],
width: 700,
height: 300
},
title: {
text: 'Weather Today'
},
credits: {
enabled: false
},
subtitle: {
text: 'Åsen, Norway'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [{
title: {
text: 'Temperature C'
}
}, {
title: {
text: '%'
},
opposite: true
}, {
title: {
text: null
}
}, {
title: {
text: null
}
}, {
title: {
text: 'hPa'
},
opposite: true
}],
tooltip: {
formatter: function() {
if(this.series.name === 'Temperature')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
}
if(this.series.name === 'Humidity')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' %';
}
if(this.series.name === 'Dewpoint')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
}
if(this.series.name === 'Wind chill')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
}
if(this.series.name === 'Air pressure')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' hPa';
}
}
},
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
}
},
line: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 4,
lineWidth: 1
}
}
}
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'spline',
shadow: true,
showInLegend: true,
pointInterval: 60 * 1000,
dashStyle: 'solid'
} , {
name: 'Humidity',
data: hum,
yAxis: 1,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'shortdot'
}, {
name: 'Dewpoint',
data: dew,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'shortdot'
}, {
name: 'Wind chill',
data: windchill,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'shortdot'
}, {
name: 'Air pressure',
data: baro,
yAxis: 2,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'spline',
dashStyle: 'shortdot'
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});

yAxis: 4 on the Air pressure series fixed it.
Also added linkedTo: 0, to other series connected to temperature.

Highchart crashing with multiple Y axis

My highchart crashes chrome, when i add the 2nd serie.
Cannot see Chrome console to debug.. :(
Does anyone have an idea?
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
margin: [40,10,60,80],
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
/* gridLineWidth: 0, */
/* alternateGridColor: null */
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
showInLegend: false,
pointInterval: 60 * 1000,
pointStart: Date.UTC(2006, 0, 1),
marker: {
enabled: false
},
dashStyle: 'solid',
yAxis: 0,
xAxis: 0,
} , {
name: 'Humdity',
data: hum,
yAxis: 1,
xAxis: 0,
showInLegend: false,
type: 'line',
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});

You only have one yAxis, so it breaks because you set the second serie to display into the second one( yes, that's what yAxis: 1 means ).
Remove it or create the second yAxis.
Update:
Use yAxis: 0 the reffer the first and 1 to the second.
Missing , after } on line 36 of jsfiddle.
Store data before.
Demo