How to truncate value in tooltip using highcharts - highcharts

I have following code:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
zoomType: 'xy',
borderRadius: 20,
borderWidth: 2,
},
credits: {
enabled: false
},
title: {
text: 'CO2 (Latest 7-days)'
},
exporting: {
enabled: false
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 10,
labels: {
formatter: function() {
return this.value.toString().substring(0, 6);
},
rotation: 0.1,
align: 'left',
step: 20,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'CO2'
},
labels: {
formatter: function() {
return this.value +'°'
}
}
},
legend: {
enabled: false
},
tooltip: {
// crosshairs: true,
shared: true,
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: "CR3000Tower",
data: chartData,
marker: {
enabled: false
}
} ]
});
});
It is producing the following output:
I want to truncate the tooltipe value after 2 decimal point. So that the tooltip value will be 414.26 instead of the long value. Any help please. Thanks.


Set valueDecimals, see docs.

Related

Highcharts - problem when dividing series

I'm using highcharts and have to divide a series, so the mouse over event focus on the correct data. But, when I divide the data, the space between horizontal series changes.
Highcharts one serie - before divide the data
Highcharts multiple series - after divide the data
I also have the two playgrounds on JSFiddle:
https://jsfiddle.net/6g09hjyk/
Highcharts.chart('container', {
chart: {
backgroundColor: 'transparent'
},
credits: false,
navigation: {
buttonOptions: {
theme: {
fill: 'white',
padding: 5,
stroke: 'none'
}
}
},
title: {
text: null
},
subtitle: {
},
xAxis: [{
visible: true,
offset: 0.1,
},
{
visible: false
}],
plotOptions: {
series: {
pointWidth: -5
}
},
yAxis: [{
visible: true,
reversed: true,
gridLineWidth: 0,
title: {
text: 'MD (m)',
style: {
fontSize: '10px'
}
},
min: 2000,
max: 6500
},
{
opposite: true,
gridLineWidth: 0,
title: {
text: null,
}
}
],
legend: {
enabled: false
},
series: [
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2001, 2057, 3455],
[2002, 2059, 5499],
[2003, 2055, 5838],
[2004, 2058, 6028],
[2007, 2058, 6028],
[2008, 2055, 5838],
[2009, 2059, 5499],
[2010, 2057, 3455]
]
}
]
});
https://jsfiddle.net/6g09hjyk/1/
Highcharts.chart('container', {
chart: {
backgroundColor: 'transparent'
},
credits: false,
navigation: {
buttonOptions: {
theme: {
fill: 'white',
padding: 5,
stroke: 'none'
}
}
},
title: {
text: null
},
subtitle: {
},
xAxis: [{
visible: true,
offset: 0.1,
},
{
visible: false
}],
plotOptions: {
series: {
pointWidth: -5
}
},
yAxis: [{
visible: true,
reversed: true,
gridLineWidth: 0,
title: {
text: 'MD (m)',
style: {
fontSize: '10px'
}
},
min: 2000,
max: 6500
},
{
opposite: true,
gridLineWidth: 0,
title: {
text: null,
}
}
],
legend: {
enabled: false
},
series: [
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2001, 2057, 3455],
[2010, 2057, 3455]
]
},
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2002, 2059, 5499],
[2009, 2059, 5499]]
},
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2003, 2055, 5838],
[2008, 2055, 5838],
]
},
{
showInLegend: false,
pointPlacement: 0,
animation: {
duration: 2000
},
pointWidth: 4,
type: 'columnrange',
inverted: false,
name: 'Revestimento',
color: 'grey',
dataLabels: {
enabled: true,
useHTML: true,
crop: false,
x: 0
},
data: [
[2004, 2058, 6028],
[2007, 2058, 6028],
]
}
]
});
Can anyone help me?

You need to disable the grouping feature:
plotOptions: {
series: {
...,
grouping: false
}
}
Live demo: https://jsfiddle.net/BlackLabel/rta5xs81/
API Reference: https://api.highcharts.com/highcharts/plotOptions.columnrange.grouping

Why my polar chart is rendered as a line chart? (Highcharts latest version)

I followed some instructions and tutorials online but failed to create a polar chart.
It ends up a normal line chart.
What's wrong with my code? Any tips?
Thanks,
Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.y}'
},
pane: {
size: '95%'
},
chart: {
type: 'area',
polar: true,
spacingTop: 0
},
credits: {
enabled: false
},
xAxis: {
categories: ["John","Weta","Marry"],
tickmarkPlacement: 'on',
lineWidth: 2,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 2,
min: 0,
max: 100,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
plotOptions: {
series: {
borderWidth: 4,
borderColor: '#a00'
}
},
series: [{
data: [68,97,964]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

highchart-more is required to run the polar charts so you will need to include highchart-more.js library.
<script src="https://code.highcharts.com/highcharts-more.js"></script>
Highcharts.chart('container', {
title: {
text: null
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '{point.y}'
},
pane: {
size: '95%'
},
chart: {
type: 'area',
polar: true,
spacingTop: 0
},
credits: {
enabled: false
},
xAxis: {
categories: ["John","Weta","Marry"],
tickmarkPlacement: 'on',
lineWidth: 2,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 2,
min: 0,
max: 100,
labels: {
style: {
fontSize: window.screenshotMode ? '36px' : '18px'
}
}
},
plotOptions: {
series: {
borderWidth: 4,
borderColor: '#a00'
}
},
series: [{
data: [68,97,964]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
API Reference : https://api.highcharts.com/highcharts/chart.polar

Highcharts bug - label formatter function does not fire with multiple axis

I have a chart with multiple yAxis and I want to format each one differently. However, it seems with multiple yAxis, the label formatter function does not fire at all. Here's my options:
{
chart: {
backgroundColor: 'transparent',
pinchType: 'none',
height: 320,
events: {
load: (e) => {
}
}
},
plotOptions: {
line: {
states: {
hover: {
enabled: true
}
},
animation: {
duration: 750
}
},
series: {
lineWidth: 2,
}
},
series : [
{ name: 'charts',
type: 'line',
id: 0,
dataGrouping: {
groupPixelWidth: 8
},
},
{ name: 'marketcap',
type: 'line',
id: 1,
color: '#1fd3a3',
dataGrouping: {
groupPixelWidth: 8
},
},
{ name: 'volume',
type: 'area',
id: 2,
color: '#ddd',
lineWidth: 1,
dataGrouping: {
groupPixelWidth: 8
},
}
],
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
// responsive: {
// rules: [{
// condition: {
// maxWidth: 500
// },
// }]
// },
xAxis: {
// crosshair: {
// width: 1,
// color: 'rgba(255,255,255,.5)'
// },
visible: true,
type: 'datetime'
},
yAxis: [
{
opposite: false,
gridLineWidth: 0,
minorGridLineWidth: 0,
height: '75%',
tickAmount: 5,
labels: {
formatter: () => {
// this does not fire
console.log('firing!!');
return this.value
}
}
},
{
opposite: true,
gridLineWidth: 0,
minorGridLineWidth: 0,
height: '75%',
tickAmount: 5
},
{
top: '75%',
height: '25%',
opposite: false,
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
},
],
tooltip: {
followPointer: true,
shared: true,
},
credits: { enabled: false }
}
Notice that I have 3 yAxis, and within each of those I have different keys and values. I need to have a custom format for each, but when I try to use the formatter function, nothing happens. Using the format string value works, but it does not allow me to format the string the way I want. Any ideas?

Highcharts yaxis negative values error

I am using HighCharts to ploot some graph. I want my y-aixs to range between -1 to +1. When i set max=1 and min=-1 for y-axis, it does not work. Is there another way of implementing this. Below is the my code example.
$(opts.containerSelector).find('.chart-container').highcharts({
chart: {
events: {
load: loadLegendSelection
},
},
plotOptions: {
area: {
fillOpacity: 0.7
},
spline: {
marker: {
radius: 3
}
},
series: {
events: {
legendItemClick: storeLegendSelection
}
}
},
legend: {
},
loading: {
labelStyle: { "position": "relative", "top": "45%", "font-weight": "300", "color": "#29303a", "font-size": "22px" }
},
xAxis: {
gridLineDashStyle: 'dash',
gridLineColor: '#c2dce6',
gridLineWidth: 1,
min: minDate,
max: maxDate,
type: 'datetime',
labels: {
formatter: function() {
return formatTimestampTime(this.value);
}
},
events : {
afterSetExtremes : afterSetExtremes.bind(this, opts)
},
minRange: 3600 // one minute
},
yAxis: {
max: 1,
min: -1,
endOnTick: false,
gridLineDashStyle: 'dash',
gridLineColor: '#c2dce6',
gridLineWidth: 1,
labels: {
formatter: function() {
return formatMegawatts(this.value);
}
},
showFirstLabel: false,
title: ''
},
series: convertedData,
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter:
function() {
return '<b>' + formatTimestampDateTimeWithSeconds(this.x) + '</b><br>' + formatMegawatts(this.y) + ' ('+ this.series.name + ')';
}
}
});

you can try setting min and max as given below.
yAxis: [{
max:1,
min: -1,
allowDecimals: false,
endOnTick: false,
gridLineWidth: 0,
labels: {
style: {
color: '#767676'
}
},
offset: -10,
title: {
text: 'Inv ' + val_qty,
"textAlign": 'top',
"rotation": 0,
x: 60,
y: yaxisVal,
style: {
color: '#767676',
fontWeight: 'bold'
}
}
}, {
allowDecimals: false,
min: 0,
endOnTick: false,
gridLineWidth: 0,
title: {
text: y2axisname,
"textAlign": 'top',
"rotation": 0,
x: -75,
y: yaxisVal,
style: {
color: '#767676',
fontWeight: 'bold'
}
},
offset: -10,
labels: {
format: '{value}',
style: {
color: '#767676'
}
},
opposite: true
}],

Highcharts: remove 1 label from windrose chart

I have created a wind rose type chart using highcharts, and something like a label
that needs to be removed
I tried using: { lables: { enabled: false } } and also tried using
showFirstLabel and showLastLabel
But it didn't work for me :(
Here is how i created the wind rose chart:
wind_rose_chart = Highcharts.data({
table: 'roulette_windrose',
startRow: 1,
endRow: 38,
endColumn: 37,
complete: function (options) {
// Create the chart
window.chart = new Highcharts.Chart(Highcharts.merge(options, {
chart: {
renderTo: 'windrose_container',
polar: true,
type: 'column',
animation: false,
backgroundColor: '#e4e6e1',
plotBackgroundImage: "/images/gallery/windrose_roulette.png",
height: 400,
width: 350,
},
colors: ['#008403',
'#E30000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#000000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#E30000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000',
'#000000','#000000','#E30000',
'#000000','#E30000','#000000',
'#E30000','#000000','#E30000'],
title: {
text: 'Spots'
},
pane: {
size: '70%'
},
legend: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
showFirstLabel: false,
showLastLabel: false,
tickmarkPlacement: 'on',
lineWidth:0,
gridLineWidth: 0
},
yAxis: {
min: 0,
gridLineWidth: 0,
endOnTick: false,
showLastLabel: false,
showFirstLabel: false,
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
formatter: function() {
return this.y;
}
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on',
}
},
navigation: {
buttonOptions: {
enabled: true
}
},
exporting: {
enabled: true
},
credits: {
enabled: false
}
}));
}
});

following code is working:
yAxis: {
...
labels: {
enabled: false
}
}
DEMO

Resources