I have a Highcharts graph that is displaying dates, but the tooltip header is displaying the date as (for example) 1477958400000 when I want it to say "Tuesday, Nov 1, 2016". How do I change the date format on the tooltip header?
UPDATE: Here is my Highcharts code:
Highcharts.chart('div-container', {
chart: {
type: 'area'
},
title: {
text: 'Balances'
},
tooltip: {
shared: true,
useHTML: true,
pointFormat: '<span style="font-weight: bold;color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 4
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: contribution_type_balances_series
});
...and here is my data:
Date,Series1,Series2,Series3
2016-11-01,51133.8941,5709.6097,22837.8403
2016-11-02,50507.2502,5639.6387,22557.9634
2016-11-03,50967.3341,5644.3896,22576.977
2016-11-04,51310.3385,5663.6562,22654.0417
2016-11-05,51310.3385,5663.6562,22654.0417
2016-11-06,51310.3385,5663.6562,22654.0417
2016-11-07,52434.202,5787.7087,23150.239
2016-11-08,52607.4831,5806.8356,23226.7444
2016-11-09,53741.9039,5932.0534,23727.6028
2016-11-10,54068.759,5968.1318,23871.9127
2016-11-11,54068.759,5968.1318,23871.9127
2016-11-12,54068.759,5968.1318,23871.9127
2016-11-13,54068.759,5968.1318,23871.9127
2016-11-14,55476.6901,6123.5396,24493.53
2016-11-15,55483.3455,6124.2742,24496.4684
2016-11-16,55552.7511,6131.9353,24527.1117
2016-11-17,56104.0877,6147.0583,24587.6056
2016-11-18,56088.9295,6126.8777,24506.8854
$(function() {
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Balances'
},
data: {
csv: document.getElementById('csv').innerHTML
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
lineWidth: 1
}]
});
});
DEMO
Related
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}'
}
}
Im creating a mapchart with highcharts but Im having a hard time matching the colors of the countries with the coloraxis.
This is an example image of how it looks:
This is part of a function that creates the chart :
function createChart() {
chart = new Highcharts.Map({
colorAxis: {
maxColor: '#7b9b00',
minColor: '#d7e241',
type: 'linear',
allowDecimals: false,
marker: {
color: 'black'
},
labels: {
formatter: function() {
return this.value;
}
}
},
series: [{
mapData: Highcharts.maps['custom/world'],
name: 'countries',
borderColor: 'black',
showInLegend: false,
borderWidth: 0.2,
states: {
hover: {
borderWidth: 1
}
}
}]
});
}
I then wait for an an API-call to complete, and then update the chart with this code:
function updateSeries(newData) {
chart.colorAxis[0].update({
min: getMin(newData), //Value is 556910
max: getMax(newData) // Value is 353573853
}, true);
chart.addSeries({
data: newData,
title: 'Performance by Country',
mapData: Highcharts.maps['custom/world'],
joinBy: ['hc-key', 'country'],
name: 'countries',
borderColor: 'black',
borderWidth: 0.2,
states: {
hover: {
borderWidth: 1,
color: '#7b9b00'
}
}
});
}
The data that i pass in have the following structure:
Are here any obvious errors with my code?
I can't seem to figure out how to add an additional data point to the series data in Highcharts when running an area chart with line.
Here's the chart that I'd like to add an additional data point to:
http://jsfiddle.net/localman/uL8rwu6f/
$(function () {
var ranges = [
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6]
],
averages = [
[1246406400000, 21.5],
[1246492800000, 22.1],
[1246579200000, 23]
];
$('#container').highcharts({
title: {
text: 'July temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
},
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}]
});
});
I can display the additional data in a single series, but not with the above for some reason http://jsfiddle.net/localman/dWDE6/859/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
tooltip: {
formatter: function () {
return 'Extra data: <b>' + this.point.myData + '</b>';
}
},
series: [{
name: 'Foo',
data: [{
y: 3,
myData: 'firstPoint'
}, {
y: 7,
myData: 'secondPoint'
}, {
y: 1,
myData: 'thirdPoint'
}]
}]
});
Any suggestions on how to combine these?
I am having some difficulty getting pointRange to work for a HighStock combination chart I've written.
You can see the issue here, the bars should be 28 days wide but they are not. I can get this code to work on a non-HighStock chart but something is preventing it from working in HighStock and I've been unable to figure it out.
http://jsfiddle.net/3fnfy434/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 450
},
credits: {
enabled: false
},
rangeSelector : {
inputEnabled: false,
selected : 2,
buttons: [{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
labelStyle: {
color: '#40C6CE',
fontWeight: 'bold'
}
},
title : {
text : 'test'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
allowDecimals: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#25408F'
}
},
title: {
text: 't',
style: {
color: '#25408F'
}
}
}],
navigator: {
baseSeries: 1
},
series : [{
name: 's1',
data: d1,
type: 'column',
visible: true,
pointRange: 28 * 24 * 3600 * 1000,
tooltip: {
valueDecimals: 0,
valueSuffix: ''
}
},
{
name : 's2',
data : d2,
color: '#25408F',
dataGrouping: {
enabled: false
},
pointRange: 24 * 3600 * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: ''
}
}]
});
Any help greatly appreciated.
I need to make a currency conversion in the tooltip so that it shows both R$ (brazilian Real) and US$ (US Dollar).
The series are in R$ so I need to make some math in the tooltip formatter to show the US$.
But how can I do that? Can anyone help me?
This is the Fidle
This is the code
$(function () {
Highcharts.setOptions({
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
});
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Receita líquida consolidada'
},
legend: {
enabled: false
},
xAxis: {
categories: ['2012', '2011', '2010'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Bilhões'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b> R$ {point.y} Bilhões</b> (US$ {point.y} Bilhões)<br/>',
shared: true
},
plotOptions: {
series: {
fillOpacity: 1
},
area: {
stacking: 'normal',
lineColor: '#384044',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#384044',
}
}
},
series: [{
name: 'Receita líquida consolidada',
data: [35.5, 32.5, 19.4],
color: '#4fc6e0'
}]
});
});
One way to do this is to calculate the US$ values in your data:
series: [{
name: 'Receita líquida consolidada',
data: [{y:35.5,us:77.2}, {y:32.5,us:70.7}, {y:19.4,us:42.2}],
color: '#4fc6e0'
}]
You can then use it on the tooltip like this:
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b> R$ {point.y} Bilhões</b> (US$ {point.us} Bilhões)<br/>',
http://jsfiddle.net/h5JzB/
You can use tooltip formatter http://api.highcharts.com/highcharts#tooltip.formatter and calculate both values.