There is a function called setExtremes() which has to be called on either X-Axis or Y-Axis. But I have a requirement where I need to call the chart.events.selection event programmatically.
Highcharts.chart('container', {
chart: {
events: {
selection: function (event) {
}
}
}
}
Related
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 chart with multiple data series. How do I change it so that when I click on the legend it hides all other data points and only shows the data series I clicked on?
Many thanks
Return false from the legendItemClick event callback function to prevent the default legend behaviour and use hide and show methods on the relevant series.
plotOptions: {
series: {
events: {
legendItemClick: function() {
this.chart.series.forEach(s => {
s !== this ? s.hide() : s.show()
}, this);
return false;
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/tzLbxr20/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick
https://api.highcharts.com/class-reference/Highcharts.Series#show
https://api.highcharts.com/class-reference/Highcharts.Series#hide
I am working on an app where I need to show drilldown chart. I am using highcharts for this, I want to fire the click event when user clicks on the bars of second chart (drilled one).
I am using code but this is firing the event on the first chart also. Is there a way to fire it on the second chart only? or check if event is raised from which chart?
plotOptions: {
series: {
events:{
click: function (event) {
console.log(event);
alert("testing" + event.point.name)
}
}
}
}
Sample is here - https://highcharts-angular-drilldown-zqmyd9.stackblitz.io/
Try to define your chart as a global variable and add the condition to check if the chart.drilldownUpButton exists into your click callback.
Demo: https://jsfiddle.net/BlackLabel/uhbored9/
plotOptions: {
series: {
events: {
click: function(event) {
if (chart.drillUpButton) {
alert("testing" + event.point.name)
}
}
}
}
},
I'd like the cursor to be a crosshair when it is over the chart area of a highcharts graph, to indicate to users that they can zoom in. However, I don't want the cursor to be a crosshair when it's over other areas such as the legend or axes.
Is this possible?
You can use built-in method chart.isInsidePlot(plotX, plotY). Example: http://jsfiddle.net/2eje4xxb/1/
Code example:
container.on("mousemove", function (event) {
var chart = container.highcharts();
if (chart.isInsidePlot(event.pageX - chart.plotLeft, event.pageY - chart.plotTop)) {
$("body").css({
cursor: "crosshair"
});
} else {
$("body").css({
cursor: "default"
});
}
});
Another idea is to utilize chart.plotBackgroundColor option, which creates rect, which can obtain CSS styles:
chart: {
zoomType: 'x',
plotBackgroundColor: "rgba(10,0,0,0)", // dummy color, to create an element
events: {
load: function(){
if(this.plotBackground) {
this.plotBackground.toFront().css({ // move on top to get all events
cursor: "crosshair"
});
}
}
}
},
And demo: http://jsfiddle.net/2eje4xxb/2/
Yes it is possible. You can write code to set the cursor style in the mouse events.
Please find the jsfiddle here - http://jsfiddle.net/3Lu7bzmn/5/
CSS
.cursorCrossHair{
cursor : crosshair
}
.cursorDefault{
cursor : default
}
JS - Shown only specific piece of code which is required to change the cursor. The id of the div used to render the highcharts is called "container". Please refer the jsfiddle to see the full working example.
$('#container').highcharts({
chart: {
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$("#container").removeClass("cursorDefault").addClass("cursorCrossHair");
},
mouseOut: function () {
$("#container").removeClass("cursorCrossHair").addClass("cursorDefault");
}
}
}
}
},
});
});
I have a scatter plot in Highcharts and I would like to connect points with a line when hovering over a point.
Is this possible?
You can use scatter serie with lineWidth set as 2, then hide a SVG path (line) and catch mouseOver / mouseOut events to manipulate graphic.
Example:
http://jsfiddle.net/sbochan/t96cds7o/3/
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
this.series.graph.show();
}
}
},
events: {
mouseOut: function () {
this.graph.hide();
}
}
}
},
// callback
setTimeout(function(){
chart.series[0].graph.hide();
},1);