In my HighCharts Map, I have values that are currency. On the hover, I'd like them to appear as $, but they just appear are raw numbers.
Here's what I have so far
series: [
{
type: 'map',
name: 'Orders $',
states: {
hover: {
color: '#BADA55',
},
},
dataLabels: {
enabled: true,
format: '{point.name}',
},
allAreas: true,
data: this.model,
},
],
It will be enough to set pointFormat property in tooltip configuration object:
tooltip: {
...,
pointFormat: '{point.value}$'
}
Live demo: https://jsfiddle.net/BlackLabel/xp71L0jv/
API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormat
Related
i have a highstock chart with multiple series, each one has it's own tooltip(shared:false), after hovering mouse, a label appear on xAxis, how to get ride of it?
{
xAxis: {
crosshair: false
},
tooltip: {
useHTML: true,
shadow: false,
borderRadius: 0,
borderColor: "transparent",
backgroundColor: "transparent",
borderWidth: 0,
},
plotOptions: {
series: {
turboThreshold: 0,
},
states: {
hover: {
enabled: false,
},
},
},
series: [ {
type: "line",
name: series[0].name,
data: [...],
color: series[0].color,
tooltip: {
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
},
},
{
type: "line",
data: [...],
name: series[1].name,
color: series[1].color,
pointFormatter() {
return `<span>tooltip1:xxx</span>`;
},
}],
}
in here i put a sample of what i mean and a picture:
js fiddle
From Highcharts API:
split: boolean Since 5.0.0
Split the tooltip into one label per series, with the header close to
the axis. This is recommended over shared tooltips for charts with
multiple line series, generally making them easier to read. This
option takes precedence over tooltip.shared.
To get rid of the header set headerFormat to an empty string.
tooltip: {
headerFormat: ''
}
Live demo: https://jsfiddle.net/BlackLabel/bc467dmo/
API Reference: https://api.highcharts.com/highstock/tooltip.headerFormat
Expected behaviour
Able to plot data from city names
Actual behaviour
I'm able to plot the data using country subregion but it is not working for city names
Live demo - fiddle url
chart: {
map: 'countries/fr/fr-all-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: France, admin2'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
joinBy: ['name', 'code'],
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
Product version
5.0.14
I have a high chart and my data labels say Interest and balance when I click the segments of the pie chart it shows the value of 4 752.6 and I want it to show 4,752.60
{
lang: {
thousandsSep: ','
},
tooltip: {
pointFormat: '<span>{point.y:,.1f}</span>'
},
chart: {
type: 'pie'
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
dataLabels: {
enabled: true,
}
}
},
series: [
{
type: 'pie',
name: 'Line 1',
data: [
{ name: 'Balance', color: '#0000FF', y: balance, dataLabels: 'Balance' },
{ name: 'Interest', color: "#FF0000", y: interest }
]
}
]
}
You need to set the thousandsSep property in setOptions method:
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
Live demo: http://jsfiddle.net/BlackLabel/vwpfe429/
API Reference: https://api.highcharts.com/highcharts/lang
I have created a map of the Indonesian province. I already set up the 'id region' and color for each region. I don't know how to apply different colors in Highmaps.
Check out my js fiddle
I have already added 'colors' in the series properties but it doesn't seem to work. Anything helps!
This is my code
//set color region in here
var data = [
['id-ac',"#8EE244"], //Aceh
['id-su',"#8644FE"] //Sumatera Utara
//more 31 province or region
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/id/id-all'
},
title: {
text: 'Indonesia Maps'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions:{
series:{
point:{
events:{
click: function(){
//console.log(this);
alert("Province Code : "+this.options['hc-key']);
}
}
}
}
},
series: [
{
data: data,
name: 'Provinsi',
tooltip: {
headerFormat: '',
pointFormat: '{point.name}'
},
states: {
hover: {
color: '#BADA55'
}
}
}
]
});
A very minimal change to your code can solve this, by supplying a keys value:
series: [{
data: data,
keys: ['hc-key', 'color'],
// ...
}]
This maps the first value in your data to the hc-key, and the second value to color of the given data point.
See this JSFiddle demonstration of it in use.
I have set color region-wise for my country India.
https:// jsfiddle.net/vivekpawsan624/bzu32ma4/14/
Playing with the Highcharts Map samples and wanted to see how multiple series worked with maps. Here is the US population density map with another series showing the state capitals:
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-capitals.json', function (dcap) {
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-population-density.json', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.code = this.code.toUpperCase();
});
if (_dochartwhenready === true) {
if (_domap === true) {
var mapobject = {
chart: {
map: 'countries/us/us-all',
borderWidth: 1,
renderTo: 'container'
},
title: {
text: 'US population density (/km²)'
},
exporting: {
sourceWidth: 600,
sourceHeight: 500
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
},
{
animation: {
duration: 3000
},
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: dcap,
joinBy: ['lat', 'lat', 'lon', 'lon'],
dataLabels: {
enabled:true,
color: '#ccccc',
format: '{point.capital}'
},
tooltip: {
pointFormat: '{point.capital}: {point.population}'
}
}]
};
_map = new Highcharts.Map(mapobject);
}
This works -- partly:
The tool tips work exactly as expected. However, only a few state capital names show up on the map. How come?
The source of the problem are overlapping data labels. This code forces Highcharts to show all of them:
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/vtwv061b/
API reference: https://api.highcharts.com/highmaps/plotOptions.series.dataLabels.allowOverlap
This is simply due the zoom level, aparently.
Also, I would not recomend using joinBy on lat and long since the may vary in really small decimals.
Here's a fiddle with a working example: https://jsfiddle.net/3ttmyxmo/
If you zoom in you will see the capital names popping over.
I used joinBy on postal-code and abrev instead of lat long:
{
animation: {
duration: 3000
},
type: 'mappoint',
name: 'Cities',
color: Highcharts.getOptions().colors[1],
data: capitals,
joinBy: ['postal-code', 'abrev'],
dataLabels: {
enabled:true,
color: '#ccccc',
format: '{point.capital}'
},
tooltip: {
pointFormat: '{point.capital}: {point.population}'
}
}