I am working with highmaps and got stuck in one requirement .
I want to color a country with a particular color in lat-long world-map .
Let's say I need US color to be blue and Russia color to be Red on the following map fiddle .
Is there any API in highmaps to support the same ?
`http://jsfiddle.net/dnbtkmyz/`
Thanks
You could do this with manipulation of load events like this:
chart: {
events: {
load: function() {
this.series[0].data = this.series[0].data.map((el) => {
if (el['hc-key'] == "us") {
el.color = "#ff0000";
return el;
}
if (el['hc-key'] == "ru") {
el.color = "#0000ff";
return el;
}
return el
})
this.update({
series: [{
data: this.series[0].data
}]
})
}
}
}
Working example: http://jsfiddle.net/ewolden/dnbtkmyz/42/
Related
Can functionality described here: save chart button of stock tool chart not working in highcharts save also currently selected RangeSelector?
The simplest solution seems to be to overwrite the default saveChart button functionality. In the below example saving all indicators and x-axis extremes should work correctly.
const savedOptions = localStorage.getItem(['highcharts-chart']);
const baseOptions = {...};
H.stockChart('container', H.merge({
navigation: {
bindings: {
saveChart: {
init: function(button) {
var navigation = this,
chart = navigation.chart,
annotations = [],
series = [],
xAxis = [],
yAxis = [];
annotations = chart.annotations.map(annotation => annotation.userOptions);
chart.series.forEach(s => {
if (!s.options.isInternal) {
series.push(s.userOptions);
}
});
chart.yAxis.forEach(axis => {
if (axis.userOptions.className !== 'highcharts-navigator-yaxis') {
yAxis.push(axis.userOptions);
}
});
chart.xAxis.forEach((axis, index) => {
if (!axis.options.isInternal) {
xAxis.push(axis.userOptions);
xAxis[index].min = axis.userMin;
xAxis[index].max = axis.userMax;
}
});
H.win.localStorage.setItem('highcharts-chart', JSON.stringify({
series,
annotations,
yAxis,
xAxis
}));
H.fireEvent(this, 'deselectButton', {
button
});
}
}
}
}
}, savedOptions ? JSON.parse(savedOptions) : baseOptions));
Live demo: https://jsfiddle.net/BlackLabel/r92b475e/
API Reference: https://api.highcharts.com/highstock/navigation.bindings.saveChart
I am new to high charts.
Below is my partial code in a function when creating a mapChart, what it does is that it only show the matching region (with cur_state) as red and others as blue.
chart: {
backgroundColor: null,
map: 'countries/au/au-all',
events: {
load: function () {
// place1
this.series[0].data = this.series[0].data.map((el) => {
// place2
if (el['hc-key'] == region_dict[cur_state][1]) {
el.color = "#ff0000";
return el;
}
el.color = "blue"
return el
})
this.update({
series: [{
data: this.series[0].data
}]
})
}
}
},
When the value of cur_state is changed, I recall the function which contains the map graph, hoping that the corresponding region has color update.
This is the first time I call the function:
This is after second time I call the function, the coloring and hovering effect are gone:
After testing, I realised that both place1 and place2 are executed when the chart is firstly created, and only place1 is executed when the chart is re-created.
My other part of code has similar structure as this: https://jsfiddle.net/gh/get/library/pure/highslide-software/highcharts.com/tree/master/samples/mapdata/countries/au/au-all
How can I achieve the expected outcome?
Thanks for helping
The best solution in your case seems to be to use render event and change the color on the SVG level. Example:
chart: {
...,
events: {
render: function() {
this.series[0].points.forEach(function(point) {
if (point['hc-key'] == state) {
point.graphic.attr({
fill: 'red'
});
}
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/x69pLcyo/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
I have a bar chart with labels. Is it possible to get the "points" data by hovering over said labels using custom-events library?
By points data I mean the variable from here:
tooltip: {
useHTML: true,
formatter(this: { points: any[] }) {
}
}
You can loop through all series points and match a point with a label position. Example:
xAxis: {
...,
labels: {
events: {
mouseover: function() {
const points = [];
this.axis.series.forEach(s => {
s.points.forEach(point => {
if (point.x === this.pos) {
points.push(point);
}
})
});
console.log(points);
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/3xvgtw2c/
I'm using Highcharts to create organization charts as in provided example : https://jsfiddle.net/vegaelce/7rb6esqt/
Is it possible to add a "collapse" feature as in the Google organization chart ? In the following example https://jsfiddle.net/vegaelce/kb2gted4 when you double clic on "Mike" or "Jim" cell, it collapse all the cells above. I need to reproduce an equivalent mode with Highcharts, do you have an idea to do that ? (in Google API, the collapse mode is enabled via
allowCollapse:true
Thanks
There is no such built-in functionality in Highcharts, but you can add it by using click event and show/hide methods. Example:
plotOptions: {
series: {
point: {
events: {
click: function() {
const operateChildren = (point, operation) => {
point.linksFrom.forEach(link => {
link.graphic[operation]();
link.toNode.graphic[operation]();
operateChildren(link.toNode, operation);
});
};
if (this.linksFrom && this.linksFrom[0]) {
if (this.linksFrom[0].graphic.visibility === 'hidden') {
operateChildren(this, 'show');
} else {
operateChildren(this, 'hide');
}
}
}
}
}
}
},
tooltip: {
formatter: function(tooltip) {
if (this.point.graphic.visibility !== 'hidden') {
return tooltip.defaultFormatter.call(this, tooltip);
}
return false;
}
}
Live demo: https://jsfiddle.net/BlackLabel/dp03gq6a/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#show
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
using Highchart, how can we change the zIndex for a line according to its state, or dynamically from a click event ?
I tried :
plotOptions: {
series: {
states: {
select: {
lineWidth: 2,
zIndex:10
}
},
with : this.setState(this.state === 'select' ? '' : 'select'); in the Click event but it doesn't work.
Alright, it's definitely not pretty, but I couldn't find a way to actually set the zIndex, so I had to do some maneuvering to fake it and bring each series to the front in a certain order. Here's the snippet to include:
Highcharts.Series.prototype.setState = (function (func) {
return function () {
if (arguments.length>0){
if (arguments[0] !== ''){
if (typeof this.options.states[arguments[0]]['zIndex'] !== 'undefined'){
this.options.oldZIndex = this.group.zIndex;
this.group.zIndex = this.options.states[arguments[0]]['zIndex'];
}
}else{
if (typeof this.options['oldZIndex'] !== "undefined"){
this.group.zIndex = this.options['oldZIndex'];
}
}
var order = [], i = 0;
$.each(this.chart.series, function(){
order.push({id:i,zIndex:this.group.zIndex,me:this});
i++;
});
order.sort(function(a,b){return (a.zIndex>b.zIndex) ? 1 : -1;});
$.each(order, function(){
this.me.group.toFront();
});
func.apply(this, arguments);
}
};
} (Highcharts.Series.prototype.setState));
And here's the JSFiddle demonstrating:
http://jsfiddle.net/G9d9H/9/
Let me know if that's what you needed.
I think a better solution is to set the series.group.toFront() method on click (I prefer to use it on mouseover)
plotOptions: {
series: {
events: {
click: function () {
this.group.toFront();//bring series to front when hovered over
}
}
}
}