I want to drop multiple data into 1 tooltip. Shared is false, this is correct. One line should only show its own value.
series: [
{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175, 43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
data2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
data3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
},
{
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111, 12908, 5948, 8105, 11248, 8989, 11816, 18274],
data2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
data3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
},
]
On code above I want to add a second and third data from a query.
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/> Second: {point.data2} <br> Third: {point.data3}',
},
How to add these 'point.data2' and 'point.data3' values into the tooltip? I get null as return.
Thanks in advance.
In case of your chart you should be able to use pointFormatter instead of pointFormat and inside pointFormatter get your second and third data.
http://api.highcharts.com/highcharts/tooltip.pointFormatter
tooltip: {
pointFormatter: function() {
console.log(this)
var string = this.series.name + ': ' + this.y + '<br>';
string += 'Second: ' + this.series.options.data2[this.index] + '<br>';
string += 'Third: ' + this.series.options.data3[this.index];
return string;
}
},
You can find an example of a chart with pointFormatter in the link below:
http://jsfiddle.net/km8bovdz/
Yes, this will return null, because your data2 and data3 arrays are not associated with the point in any way.
The point is within the data array, and additional data elements should be attached to each point, rather than each series.
You achieve this by making each data point an object in the data array, like this (subset of your posted data):
series: [{
name: 'Installation',
data: [{
y: 43934,
data2: 1,
data3: 1
}, {
y: 52503,
data2: 2,
data3: 2
}, {
y: 57177,
data2: 3,
data3: 3
}]
}, {
name: 'Other',
data: [{
y: 12908,
data2: 1,
data3: 1
}, {
y: 5948,
data2: 1,
data3: 1
}, {
y: 8105,
data2: 1,
data3: 1
}]
}]
Fiddle example:
http://jsfiddle.net/jlbriggs/smxqwc1y/
Related
For a Highcharts spline type chart, I want to completely remove the left and right spaces.
I tried to change some options but there is no success.
Spacing and margin keys did not make any appearance changes.
Does anyone have any info on how to remove the spaces, all help is welcome.
Example chart
Highcharts.chart('container', {
title: {
text: ''
},
chart: {
type: 'spline',
},
legend: {
display: false
},
xAxis: {
categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
},
yAxis: {
tickPosition: 'inside',
min: 0,
title: {
text: null
},
floor: 0,
tickWidth: 1
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
These gaps are added when using the xAxis.categories option. If you remove these options then it works the way you want. For tick positioning in this case it is better to set other available API options. Find out more about it here: https://api.highcharts.com/highcharts/xAxis.tickPositions
In my aplication I am using Highcharts and I have and data like from API
var data=[
{Part1:6,Part2:3,Test2:7,Part4:4,Part5:2},
{Part1:8,Part2:5,Test2:8,Part4:6,Part5:7,Part6:2},
{Part1:8,Part2:5,Test2:8,Part4:6,Part5:7,Part6:2,Test:3}
]
and I need to convert it to
[
{ name:"Test", data: [null, null, 3] },
{ name:"Part6", data: [null, 2, 2] },
{ name:"Part5", data: [2, 7, 7] },
{ name:"Part4", data: [4, 6, 6] },
{ name:"Test2", data: [7, 8, 8] },
{ name:"Part2", data: [3, 5, 5] },
{ name:"Part1", data: [6, 8, 8] }
];
this is my example app snipped
var data=[
{Part1:6,Part2:3,Test2:7,Part4:4,Part5:2},
{Part1:8,Part2:5,Test2:8,Part4:6,Part5:7,Part6:2},
{Part1:8,Part2:5,Test2:8,Part4:6,Part5:7,Part6:2,Test:3}
]
var expected_result=
[
{name: 'Test', data: [null, null, 3] },
{name: 'Part6', data: [null, 2,2] },
{name: 'Part5', data: [2, 7, 7] },
{name: 'Part4', data: [4, 6, 6] },
{name: 'Test2', data: [7, 8, 8] },
{name: 'Part2', data: [3, 5, 5] },
{name: 'Part1', data: [6, 8, 8] }
];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Net', 'Brut', 'Others']
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: expected_result
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
How can I convert my base data to expected. Thanks in advance
const data = [
{ Part1: 6, Part2: 3, Part3: 7, Part4: 4, Part5: 2 },
{ Part1: 8, Part2: 5, Part3: 8, Part4: 6, Part5: 7, Part6: 2 },
{ Part1: 8, Part2: 5, Part3: 8, Part4: 6, Part5: 7, Part6: 2, Part7: 3 },
];
const maxNumberPart = Math.max.apply(
null,
data.map(d => Object.keys(d).length),
);
const result = new Array(maxNumberPart).fill(null).map((p, i) => ({ name: `Part${maxNumberPart - i}`, data: [] }));
data.forEach(obj => {
result.forEach(part => {
part.data.push(obj[part.name] ? obj[part.name] : null);
});
});
console.log(result);
UPD dynamic key names:
const data = [
{ Part1: 6, Part2: 3, Test2: 7, Part4: 4, Part5: 2 },
{ Part1: 8, Part2: 5, Part3: 8, Part4: 6, Part5: 7, Part6: 2 },
{ Part1: 8, Part2: 5, Part3: 8, Test: 6, Part5: 7, Part6: 2, Part7: 3 },
];
const keys = data.reduce((set, val) => {
Object.keys(val).forEach(key => set.add(key));
return set;
}, new Set());
const result = [...keys].map(key => ({
name: key,
data: [],
}));
data.forEach(obj => {
result.forEach(part => {
part.data.push(obj[part.name] ? obj[part.name] : null);
});
});
console.log(result);
You can group numbers first using a foreach and then fill the null value after
you can try this it is key agnostic
var data=[
{Part1:6,part2:3,part3:7,part4:4,part5:2},
{Part1:8,part2:5,part3:8,part4:6,part5:7,part6:2},
{Part1:8,part2:5,part3:8,part4:6,part5:7,part6:2,part7:3}
]
p={}
res=[]
for(let o of data ){
Object.entries(o).forEach(k=>{
if(!p[k[0]]) res.push({name:k[0],data:p[k[0]]=[]})
p[k[0]].push(k[1])
})
}
i=0
while(i<res.length){
while(res[i].data.length<3){
res[i].data.unshift(null)}
i++
}
console.log(res.reverse())
if your keys are not the same and each time they can be different you can
try this
var data=[
{Test:6,part2:3,part3:7,part4:4,part5:2},
{Part1:8,part2:5,part3:8,part4:6,part5:7,part6:2},
{Part1:8,part2:5,part3:8,part4:6,part5:7,part6:2,part7:3}
]
p={}
res=[]
for(let o of data ){
obarr= Object.entries(o)
obarr.forEach((k)=>{
if(!p[obarr.indexOf(k)]) res.push({name:k[0],data:p[obarr.indexOf(k)]=[]})
p[obarr.indexOf(k)].push(k[1])
})
}
i=0
while(i<res.length){
while(res[i].data.length<3){
res[i].data.unshift(null)}
i++
}
console.log(res.reverse())
I need to show tooltips for only the last two series when hovering the mouse over the graph. In this example the idea will be to show only the tool tips for the values 1699 and 1750. The rest of the values can't show any tooltips when hovering the mouse. How can I achive that? I haven't found any way to do so. Is it possible? Thanks in advance.
(function () {
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
}
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="grafica1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You can use the formatter like this :
tooltip: {
formatter: function() {
if(this.points[0].key < (this.points[0].series.xData.length -2)){
return false;
}
var s = [];
s.push(this.x);
this.points.forEach(function(point) {
s.push('<b>' + point.series.name + '</b>: ' + point.y);
});
return s;
},
split: true
},
Fiddle
Not the cleanest code (there still an error in the console) but it's work.
Edit
Following Deep 3015 comment, code and fiddle updated
You can wrap tooltip.prototype.renderSplit method to show the tooltip only if the points have certain x values.
Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function (p, labels, points) {
if (!this.options.showOnLastTwo) {
return p.call(this, labels, points)
}
const point = points[0]
if (point) {
const allowedXs = point.series.xData.slice(-2)
if (allowedXs.includes(point.x)) {
return p.call(this, labels, points)
}
}
this.destroy()
})
And set in tooltip options showOnLastTwo flag to true:
tooltip: {
split: true,
showOnLastTwo: true
},
The flag is not necessary but the wrap changes Highcharts globally so it will affect every chart - the flag will prevent this.
live example: http://jsfiddle.net/sLvekuht/1/
I am trying to customize the tooltip of area chart. I am using Highchart for this.
I am plotting 3 series in area chart. My requirement is to show tooltip at fixed location in chart which is top center. Now, when i put cursor at any point then tooltip should show all series name and their current value where the cursor is. Refer below image:
Currently i am able to show tooltip on top - center and putting mouse at any point is showing current series name and data but it is showing current series name in all 3 places.
Highchart option:
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'ACCUMULATED WEALTH'
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
tickmarkPlacement: 'on',
crosshair: {
width: 1,
color: "#ccc"
},
title: {
enabled: false
}
},
yAxis: {
title: {
text: false
},
opposite: true,
labels: {
formatter: function() {
return '$' + this.value + 'k';
}
},
},
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
shared: true,
padding: 0,
split: false,
headerFormat: "",
pointFormat: '<table><tr><td>{point.y}</td><td>{point.y}</td><td>{point.y}</td></tr>' +
'<tr><td>{series.name}</td><td>{series.name}</td><td>{series.name}</td></tr></table>',
footerFormat: "",
positioner: function () {
return { x: 250, y: 25 };
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Cash Flow',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
}, {
name: 'Appreciation',
data: [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
}, {
name: 'Principal',
data: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33]
}]
});
Here is what i have tries so far:
https://jsfiddle.net/2pdossk7/13/
Please help. Thanks in advance!
It might be difficult to achieve the desired result without tooltip.formatter.
This is how you can build tooltip text in a formatter:
formatter: function(tooltip) {
const points = this.points;
let str = '<table><tr>';
points.forEach(point => {
str += '<td style="text-align:center">' + point.y + '</td>';
});
str += '</tr><tr>';
points.forEach(point => {
str += '<td><span style="font-size:20px;color:' + point.color + '">●</span> ' + point.series.name + '</td>';
});
str += '</tr></table>';
return str;
},
And position it in the center of the chart:
positioner: function () {
const chart = this.chart;
return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop + 10 };
}
Example and output
https://jsfiddle.net/eb3ou25v/
You can achieve desired result using pointFormat method
This is how you can use this
pointFormat: '<table style="text-align:center; display: inline-block; background: white;"><tr><td>{point.y}</td></tr>' +
'<tr><td><span style="font-size:20px;color:{series.color}">●</span> {series.name}</td></tr></table>',
positioner: function () {
const chart = this.chart;
return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop - 20 };
}
for jsfiddle example click here
I'm new to coding, and I feel like this answer shouldn't be very difficult; yet, I've struggled with it for about two days now and so I'm looking for help.
I'm trying to specify the colors of areas in Highcharts' "Area Chart with Negative Values". I'm using Highcharts' basic template, but can't figure out how to change the colors of the respective areas.
Here's the JSfiddle that includes me trying to specify the color; when I do so, the chart fails to run. (Notice I've tried to change the color of the "john" series).
http://jsfiddle.net/aoouym2o/
I followed the instructions given in HighCharts' API, but I can't make it work. Here's the API section: http://api.highcharts.com/highcharts#plotOptions.area.color
Again, here's the original code without me trying to change any color:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
});
What am I missing?
You did it exactly right, you were just missing a comma before your added color setting ;)
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#FF0000'
},
Here is a link to a modified fiddle. (updated link to the working version)
You can set color for the chart by specifying it in each series object:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#0000FF'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#FF0000'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#00FF00'
}]
Just change color setting :P
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color : '#f7a35c'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#7cb5ec'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#90ed7d'
}]
and if you want to change the color of the number > 0 watch
http://www.highcharts.com/docs/chart-concepts/series
Add option:
plotOptions: {
series: {
lineColor: '#303030'
}
},