My Highchart tooltip is formatted as follows:
$(function() {
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Trebuchet MS"
}
},
lang: {
thousandsSeparator: ','
}
});
// plot the chart
new Highcharts.Chart({
chart: {
renderTo: 'graphContainer',
type: 'area',
marginBottom: 110
},
tooltip: {
shared: true,
xDateFormat: '%Y-%m-%d',
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>${point.y:,.0f} m</b><br/>',
crosshairs: true
},
......
I know the ":,.0f" controls the format of the number, but I can't figure out how to add the "," in the thousands place instead of the " " blank space.
I think the issue is a typo. The global should be thousandsSep rather than thousandsSeparator, as described in the API docs.
Related
Probably a stupid sounding question, but I want my Highcharts column tooltip to display when I mouseover anywhere above or on the column, but I don't want to use the tooltip shared:true attribute.
I'm doing this because my client has some columns that are tiny compared to their neighbors. It would be nice if the mouseover worked before I got close to the tiny columns.
Screenshot of what I'm trying to ask:
Here is a fiddle.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Find Tauntauns'
},
subtitle: {
text: 'Some site on the web'
},
xAxis: {
categories: [
'Jan'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Tauntauns'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
//shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [7]
}, {
name: 'Hoth',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [5]
}]
});
Unfortunately, this option is not available from the API for the column series type because the pointTracker functionality works different than for the other series like a line or scatter.
My idea to achieve the wanted result is rendering dummy/transparent rectangles which will trigger the tooltip on mouseover effect.
Demo: https://jsfiddle.net/BlackLabel/3pr4baeq/
events: {
render() {
let chart = this;
chart.series.forEach(s => {
s.points.forEach(p => {
if (p.customRect) {
p.customRect.destroy();
}
p.customRect = chart.renderer.rect(p.barX + chart.plotLeft, chart.plotTop, p.pointWidth, p.shapeArgs.y)
.attr({
//fill: 'transparent',
fill: 'yellow'
})
.add();
p.customRect.element.onmouseover = function() {
chart.tooltip.refresh(p)
}
})
})
}
}
You can change the color of the rendered rectangles to the transparent which will hide them.
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
API: https://api.highcharts.com/highcharts/chart.events.render
I'm new to highcharts and I want to display date according to the data I get from the Database. I want to show date either in the tooltip or below the categories. Right now categories is displaying name of days. If possible I want to display date of that day below the Day in categories.
<script>
Highcharts.chart('column', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: <?= json_encode($day_names) ?>,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0.5
}
},
colors: [
'#1cc88a', '#4e73df', '#f6c23e', '#e74a3b'
],
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
series: JSON.parse('<?= $processed_stars_data ?>')
});
</script>
You can use moment.js to get the values formatted, but
Highcharts has it's own date formatting functionality
which would be more idiomatic with Highcharts. It can be attached
onto the tooltip option in the highcharts constructor like so:
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.x))
+ ' date, ' + this.y + ' Kg.';
}
}
You may want to also add the dateTimeLabelFormats object with the
options you need for your dates, under the xAxis.
http://jsfiddle.net/Kc23N/3/
I am using highcharts to in my app and want to add tooltip with thousand separator like I did it in data labels. I used custom formatting for tooltip, so what should I change to achieve this
tooltip options in highcharts
tooltip: {
formatter: function () {
return (this.x + ':' + this.y);
},
shared: true,
useHTML: true
},
JS FIDDLE
use thousand separator in lang
$(function () {
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
and in tooltip- formatter use like
tooltip: {
pointFormat: '<b>{point.x} :</b>' + 'Count: <b>{point.y:,.0f}</b>',
shared: true,
useHTML: true
}
Updated fiddle with separator without decimal point
Just following Nishith Kant Chaturvedi's answer, and since there is no jsfiddle example available, here you can see how to implement that answer.
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Salary']
},
yAxis: {
title: {
text: ''
},
stackLabels: {
enabled: true,
format: '{total:,.2f} $us'
},
labels: {
format: "{value:,.2f} $us",
}
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
format: '{point.y:,.2f} $us',
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
}
}
},
series: [{
type: 'column',
name: 'Tomas',
data: [60000]
}, {
type: 'column',
name: 'Amy',
data: [18000]
}, {
type: 'column',
name: 'Jenny',
data: [85000]
}]
});
http://jsfiddle.net/zrc5skLy/
Use Highcharts.numberFormat() in point.x or point.y
example:
tooltip: {
enabled: true,
split: true,
shared: true,
formatter: function () {
// The first returned item is the header, subsequent items are the points
return [Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x)].concat(
this.points
? this.points.map(function (point) {
return (
point.series.name +
": " +
// numberFormat(data, decimal)
Highcharts.numberFormat(point.y, 2)
);
})
: []
);
},
},
I'm using highchart in my web site. I wanna use thousand seperator in tooltip.
Here's the code:
divChart.highcharts({
lang: {
thousandsSep: ','
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<div style="direction:rtl; text-align:center; font-size:16px;">{point.key}</div><table >',
pointFormat: '<tr><td style="text-align: center;color:{series.color};width:100px;"><b style="margin:4px;">{point.y:,.0f}</b></td></tr>',
footerFormat: '</table>'
},
series: temp
});
But it's not working.
And also I wanna display pie chart labels in rtl direction.
Thanks for answering.
You can use a tooltip formatter and inside use a Highcharts.numberFormat
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
return '<div style="direction:rtl; text-align:center; font-size:16px;">'+this.key+'</div><table><tr><td style="text-align: center;color:'+this.series.color+';width:100px;"><b style="margin:4px;">'+Highcharts.numberFormat(this.y,0,'.',',')+'</b></td></tr></table>';
}
},
Example:
- http://jsfiddle.net/bd1hvj1y/
I am fairly new to Highcharts. I have a pie chart that is being rendered fine with dynamic data (JSON String) . But I want to customize certain slices to be Sliced: true and Selected: True. I am not sure how to do it. Please find my code as below,
<div id="container_${page_id}" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>
var series = [];
var total = 0;
$.each(data, function(index, value) {
series.push([value.statisticData+'_'+value.sizes,parseInt(value.sizes)]);
console.log("statisticData",value.statisticData);
console.log("value.sizes",value.sizes);
total += parseInt(value.count);
});
var chartSessionStatus = new Highcharts.Chart({
chart: {
renderTo: $("#container_"+testSessionPageId).get(0),
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: [{
text: 'Statistics',
}]
}}
},
tooltip: {
formatter: function() {
return this.point.name.split('_')[0] + ': <b>'+this.y+'</b>';
}
},
title: {
text: '<h4 style="font-style: bold">Tenant Statistics</h4>'
},
legend: {
labelFormatter: function() {
return this.name.split('_')[0] + ' (' + this.y+')';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: 0,
useHTML: true,
formatter: function() {
if( this.y > 0)
return '<b>'+this.point.name.split('_')[0] +'('+ this.y +')</b>';
}
},
showInLegend: true,
size: 150
}
},
series: [{
type: 'pie',
name: 'Tenant Statistics',
data: series
}]
});
});
Main point of concern, in the series , I have the option for data as "data : series" but I would like to customize certain slices in this series. But since the data is dynamic I am not sure how to use only certain parts of the json string
The Json that i receive is in the following format :
[{"statisticData":"Tests Created","sizes":"3"},{"statisticData":"Students","sizes":"2"},{"statisticData":"Users","sizes":"7"},{"statisticData":"Schools","sizes":"10"}]
Any Help is greatly appreciated !!! Thanks in advance.
After getting json, you can parse it / add slice parameter and then use in highcharts. So instead of pushing :series.push([value.statisticData+'_'+value.sizes,parseInt(value.sizes)]);
you can push something like:
series.push({
name: value.statisticData+'_'+value.sizes,
y: parseInt(value.sizes),
sliced: true,
selected: true
});