The chartjs feature to show/hide a dataset by clicking on the legend is really nice. Is it possible to achieve the same but clicking on for instance a checkbox outside the chart canvas?
This should do the trick
chart.data.datasets.forEach(function(e) {
e.hidden = true;
});
Related
I binded the apexchart in my application. However when I make the container of the chart smaller, the toolbar is not moved or overlied (like the chart).
since I'm new in react. I have no idea how to solve that. It would be nice if it is moved and the chart resizes automatically. (actually what the "reset zoom" button does)
Another question would be if I can use my own toolbar on the left, but execute the same listener of the apexchart toolbar.
Thank you in advance
I have this AmCharts4 radar chart in my react application is there any way to disable the click-drag zooming?
Thx.
Image of the chart
Assuming you're referring to the zoom from the chart cursor, you have to set the cursor object's behavior to "none":
chart.cursor = new am4charts.RadarCursor();
chart.cursor.behavior = "none";
You can find a list of valid properties in the linked documentation and in this tutorial.
I have a react app that uses ChartJS through 'npm react-chartjs-2'.
I am working with a Line chart and I a have the following requirements:
1- Detect clicking on chart area (white area; other than data set line, and legend), then do some logic
2- Detect clicking on legend rectangle at the top to hide/show the dataset (current default behaviour)
I have tried using options.onClick but it seems to override legend click.
Also tried getElementAtEvent it returns the dataset clicked on but when clicking on legend/chart area comes as empty. getDatasetAtEvent always return empty array. And if I use options.legend.onClick I loose default hide/show behaviour and need to do it programmatically.
I was wondering is there is a better way to achieve requirements above. Thanks
You can use the getElementsAtEvent property. This gives value only when the chart area is clicked, the element is null if it is clicked on the legend. If it is clicked on the chart area then it holds properties from which we can get the clicked xAxis and legend value.
document.getElementById("yourChartCanvasId").addEventListener("click", function (e) {
var element = instance.getElementsAtEvent(e)[0];
if (element) {
//Handle click on chart area
}
else {
//Handle click on legend area
}
});
Also if you don't want to do anything on legend click, keeping the default Chart.js behavior then don't include the else block.
In a Codenameone app, I'm trying to develop a carousel with a thumbnail list at the bottom. I've used Tabs control to display files (of diff types like images, video, text, button etc) in carousel style in the center of a form and another Tabs control to display thumbanail images (of the first carousel files) at the bottom of the form. When a user selects a thumbnail image in the bottom carousel, corresponding component should be displayed in the first carousel.
hi.add(BorderLayout.CENTER, mainCarousel);
hi.add(BorderLayout.SOUTH, bottom_tab);
bottom_tab.addSelectionListener((i1, i2) -> {
// bottom_tab.getTabComponentAt(i2).addPointerPressedListener((i) -> {
mainCarousel.getTabComponentAt(i2).setVisible(true);
mainCarousel.getTabComponentAt(i2).repaint();
// });
});
But the component not getting displayed in the central carousel.
Also, I tried to capture the event addPointerPressedListener, but it's not getting fired when I select a thumbnail image.
You can't set tab components to visible/invisible to show/hide them. That won't work. I'm guessing that what you want is a horizontal list for the bottom UI similar to the answer here.
I would suggest using pointer released always. Notice that this will only get delivered to focusable components or the form. To make sure you get the event you can register a pointer release listener on the form.
I am using AnyMap and my client wants to display some information in the legend for unbound regions.
Because I can just add a legend item for a series I am implementing an empty series and then adding a legend item on this. However as there is no country to select I do not want my legend item to be selectable. How can I prevent this?
The only solution I found for this is applying "disabled:true" to my legendItem, but then the color changes..
This is how my code looks so far
var unboundRegions = anyMap.choropleth();
unboundRegions.legendItem({text: data.unbound, iconType: "square", iconFill: '#ffffff', iconStroke: '#e8e8e9', disabled: true});
Any ideas?
You can prevent legend icon selection using "legendItemMouseDown" legend event listener - just prevent its default behavior using e.preventDefault();
jsfiddle example