How do I get only the node data I clicked on? I fill data when get it from server.
When i get log this i can not find my need data.
I using Highcharts 8.0.0
{
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
layoutStartingDirection: "horizontal",
dataLabels: {
enabled: true,
useHTML: true,
style: {
fontFamily: 'isw',
fontSize: '13px',
},
formatter: null
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
useHTML: true,
style: {
fontFamily: 'isw',
fontSize: '13px',
},
formatter: null
},
borderWidth: 1
}],
data: null,
events: {
click: function (event) {
console.log(this);
}
}
}]
}
jsFiddle
I fount it!
events: {
click: function (event) {
console.log(event.point);
}
}
Related
I've created a donut chart using vue-highcharts/highcharts, and am trying to append text on mouseover to the center of the donut. I've got it appending static text, however I'm trying to return the data from the point I hover over, to display that in the center, however I can't seem to find any relevant data from within the event object. Does anyone know how I might be able to access that data?
chartOptions: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
legend: {
align: 'right',
enabled: true,
layout: 'vertical',
verticalAlign: 'middle'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
center: ['50%', '50%'],
showInLegend: true,
events: {
mouseOver: (e) => {
const { chart } = this.$refs.highchartsRef;
const height = chart.chartHeight / 2;
const width = e.target.center[3];
console.log({ chart });
console.log({ e });
chart.renderer
.text('Top Test</br>Bottom Test', width, height, true)
.css({
color: '#4a4a4a',
fontSize: '16px',
fontWeight: 700
})
.addClass('highcharts-center-label text-center')
.add();
},
mouseOut: () => {
document.querySelector('.highcharts-center-label').remove();
}
}
}
},
series: [{
name: 'Categories',
colorByPoint: true,
size: '100%',
innerSize: '60%',
data: this.categories.map(category => {
return {
name: category.name,
y: calculateCategoryWeight(category)
};
})
}],
title: null,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
}
}
Use point.events and a basic function instead of the arrow one.
plotOptions: {
pie: {
point: {
events: {
mouseOver: function() {
var point = this,
series = point.series,
chart = series.chart;
console.log(point.y);
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/7oub1xzj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.pie.point.events
Add Plugin 'angular2-highcharts'
add code for highmaps
ERROR
Please use this code
ionViewDidLoad() {
var chart = Highcharts.mapChart('container', {
chart: {
map: 'custom/europe',
spacingBottom: 20
},
title: {
text: 'Europe time zones'
},
legend: {
enabled: true
},
plotOptions: {
map: {
allAreas: false,
dataLabels: {
enabled: true,
color: '#FFFFFF',
style: {
fontWeight: 'bold'
},
// Only show dataLabels for areas with high label rank
format: null,
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2'];
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
})
}
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}'
}
}
My chart was ok, I don't know what happened that the series name disappeared!
Maybe highcharts last updates need another options, or rtl causes problems.
My code: fiddle
What am I missing here?
$(function() {
$(document).ready(function() {
Highcharts.chart('user_info_46', {
chart: {
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
},
title: {
text: '',
useHTML: Highcharts.hasBidiBug,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
useHTML: true,
align: 'right',
rtl: true,
},
tooltip: {
useHTML: true,
align: 'right',
},
credits: {
enabled: false
},
series: [{
name: 'تعداد',
colorByPoint: true,
data: [{
name: 'آقا',
y: 7,
color: 'cornsilk'
}, {
name: 'خانم',
y: 2,
color: 'green'
}]
}]
});
});
});
I have a highchart, as showed on the appended image.
I am attempting to format the legend of only my last data stacked. In this case, index 1 always.
Any help on how to achieve this?
My main goal, being, on there always showing a value i have in a variable, which will be the max value possible.
createChart: function (id, chartData, maxYValues, chartTitle, chartNames, dataToMax) {
var me = this;
debugger;
me.highChart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: id
},
title: {
text: chartTitle,
fontSize: '8px'
},
xAxis: {
labels: {
overflow: 'justify'
},
categories: chartNames
},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
stackLabels: {
enabled: true,
format: maxYValues
},
title: {
enabled: false
}
},
colors: ['#afafaf', '#f89c1c', '#3aaa80'],
credits: {
enabled: false
},
tooltip: {
pointFormat: '<span>{point.name}</span>'
},
plotOptions: {
series: {
colors: ['#3aab80', '#3aab80'],
colorByPoint: true,
borderWidth: 0,
dataLabels: {
enabled: true,
headerFormat: '{point.y + point.name}',
format: '{y} mb',
verticalAlign: 'top',
y: -20
}
},
column: {
stacking: "percent"
},
area: {
dataLabels: {
enabled: false
}
}
},
legend: {
labelFormat: '<b>{point.y} MB</b><br/>',
labelFormatter: function () {
if (me.series.data.index === 1) {
return maxYValues;
}
}
},
series: [{
showInLegend: false,
data: chartData,
color: '#3aab80'
}, {
showInLegend: false,
data: dataToMax,
legend: {
labelFormat: maxYValues + 'MB</b><br/>'
}
}],
navigation: {
menuItemStyle: {
fontSize: '8px'
}
}
});
},
Thank you
UPDATE: Added code snipped, and updated the image to what my current code is showing