We Keep Coding

onZoom not triggered when zooming

I have made a line chart using react-chartjs-2 with a plugin called chartjs-plugin-zoom. I want to display the zoom level in console when zooming the chart. However, the onZoom seems not being triggered or called when zooming as I can't see any updates in the console panel. Would like to ask whether my syntax for onZoom is wrong and how can I fix that?
online example
https://codesandbox.io/s/musing-frost-m6fuz?file=/src/App.js

This is because you putted the onZoom callback in the wrong place in the options object. You putted it at the root of the zoom plugin config while it has to be configured in the zoom part so in this namespace: options.plugins.zoom.zoom.onZoom
https://codesandbox.io/s/happy-forest-9mtii?file=/src/App.js

You have placed the onZoom in the wrong nested object.
If u place the onZoom function inside the plugins-zoom-zoom object it will work.
https://codesandbox.io/s/lively-river-zry93?file=/src/App.js:3038-3538
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true
},
mode: "x",
onZoom: function ({ chart }) {
console.log(`I'm zooming!!!`);
},
// Function called once zooming is completed
onZoomComplete: function ({ chart }) {
console.log(`I was zoomed!!!`);
}
},
}

Multiple brush charts with Apexcharts in VueJs

I'm developing an application where I'm using apex charts to create a brush chart. However, I want my brush to control multiple charts instead a single one, as the example shows.
Before I start working with callbacks I'm wondering if there is an easy-way of make this work with that library, for example by passing an array of targets:
brush:{
target: 'chart2',
enabled: true
},
Thanks in advance,

I think this might be undocumented, but apparently apexcharts lets you define this:
brush: { enabled: true, targets: ['candles', 'candles_2nd'] },
I found in the lib-code that it actually handles it like this:
var targets = w.config.chart.brush.targets || [w.config.chart.brush.target]; // retro compatibility with single target option
Regards,
Jim

JVectorMap: drill-down for custom regions

Is there a way to make combined map which could use "drill-down" behaviour for some areas and "select" behaviour for other ones areas?

I believe that what you are asking can be achieved also with some of the standard functionalities provided by jVectorMap. In my example below, all US regions other than Texas can be selected, whereby the normal multimap drill-down is performed just only for US-TX.
$(document).ready(function () {
new jvm.MultiMap({
container: $('#map'),
maxLevel: 1,
main: {
map: 'us_lcc',
regionsSelectable: true,
regionStyle: {
selected: {
fill: 'green'
}
},
onRegionClick: function(event, code) {
if(code == "US-TX") {
return false;
} else {
event.stopImmediatePropagation();
}
}
}
});
});
Explanation:
As the documentation says here, the main Map of the MultiMap object can be configured the same way as the "normal" Map.
Inside the multi-map onRegionClick handler, the region selection can be avoided by returning false, and the drilldown can be stopped by invoking stopImmediatePropagation(). I tested this snippet with jVectorMap version 2.0.2 but it should work also with the latest versions.
BTW, thanks to bjornd for the great jVectorMap.

There's no standart behaviour to reach this.
To handle this I had to modify MultiMap file. In addMap function you could add
hardcode check region code or add it to config and pass or deny drilling down.

Object in console.log differs from object properties accessible in code

I'm using Highcharts to create some charts on the page. I'm trying to use the customEvents plugin to add functionality to a bubble click (pop up a modal when bubble clicked). I know Highcharts can do this without a plugin, but I need to add other functionality to other charts on the page, and only the plugin provides that functionality. So here's the issue:
I successfully added an event handler function to bubble click. It looks like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.projectId}',
events: {
click: function (event) {
console.log("Evt:",event); // event.point has what I need
console.log(event.point); // undefined
$('#modalTable2').dataTable().fnClearTable();
$('#modalTable2').dataTable().fnAddData([event.point.x,event.point.y,event.point.z]);
$('#modal2').modal('show');
}
}
},
},
bubble: {
marker: {enabled:true},
threshold: -10,
}
},
As stated in the code comments, I can see event.point in the properties in the Javascript console, but it's not actually accessible/defined in code. How can I access this object?

Highcharts applying custom style to context button using css class

I have a large set of Highcharts graphics that all use the exporting.js library for downloading in various formats. I would like to customize the context button on these charts to match the native styles of the application.
Although I have found several examples of how to achieve this within the confines of the Highcharts chart-level script (i.e. THIS EXAMPLE ) it seems rather repetitive to implement these styles in every chart knowing that I have a large set to be affected.
I realize this could potentially be achieved using a global theme in Highcharts, however I am still limited by the configuration options of the library itself.
For instance this would be the suggested path:
var chartingOptions = {
exporting: {
buttons: {
'myButton': {
id: 'myButton',
symbol: 'circle',
x: -62,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF'
}
}
}
But unfortunately it does not provide a lot of expressivity.
Am I able to define a css style and pass it to the global theme or chart set using its ID or CLASS somehow?

Yes, you can set class or id of button using theme property.
buttons: {
'myButton': {
symbol: 'circle',
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
theme: {
class: "myButton highcharts-button highcharts-button-normal",
id: "myDiamondButton"
}
}
}