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.
Related
I am using React + Recharts to create a stacked bar chart, is it possible to make data label look like the below image?
here is the complete demo
any help pleas?
You can just add another rect, working sample: https://codesandbox.io/s/rechartsstackedverticalbarchart-test-forked-433bb?file=/src/App.js:554-631
In this example, the cursor is a crosshair when hovering over the entire chart area. I am using Highcharts React however and the above example uses jQuery.
I cannot get this to work with Highcharts React - I have found the documentation for plotOption.series.cursor here, but this only allows me to show a crosshair pointer when hovering over a data point, not the whole chart area.
How can I make this work in Highcharts React?
There was an extremely easy solution which was extremely hard to find which is:
chart: {
style: {
cursor: 'crosshair',
},
}
Search in the Highcharts docs and you will not find this.
I am using this template https://coreui.io/v1/demo/pro/AngularJS_Demo/#!/dashboard for my angular project. In that it includes chart.js and angular-chart.js. After good amount of googling, I am still not able to get the tooltip in the chart above all element presents.
In all the other product of coreui it shows properly. But I am not sure why it not showing here. Please help me.
Looking at the source code, it seems they are using ChartJs for the charts.
ChartJS should automatically find the right position for your tooltips, but since the chart area is so small, the tooltip would look cut-off when it has a top position too. Try increasing the area around the chart to give the tooltip some more space. Because all the other examples in your dashboard have larger charts/containers, the problem happens only in the small boxes.
When you want to have some more power over the tooltip, you can also switch to HTML tooltips so the tooltip will be added outside of the canvas, and can be configured through CSS (like Z-index).
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;
});
Hello how can I remove a series from a chart, I know that I can get the series object using getAt(0) or getAt(1) depending on how many serieses I got in my chart.
my question is how can I remove a series from the chart.
main reason is that I give the end user the ability to change the series type: bar, line... so I wan to display the new change at run time by removing the series and adding a new one.
I tried Chart.series.removeAt(0); It removes the legend but the bar or the line still shown !!
I use extjs 4.1.1
thank you,
I had to do the same thing and give end users the ability to change the chart type at run time to give different visualizations of data. I found that there is more involved in the chart type (bar, line, pie) then just the series. In other words to achieve this, I wasn't able to just substitute a different series type for the data and add it to the chart.
I ended up creating a different config for each different type of chart using the same datastore. The chart was contained by an Ext.panel.Panel which I added this function to:
// toggle format between pie chart and bar chart
this.toggleFormat = function() {
var chart = me.down('chart');
this.remove(chart);
if (chart.chartType == 'pie') {
this.add(Ext.create('Ext.chart.Chart', bar));
} else {
this.add(Ext.create('Ext.chart.Chart', pie));
}
};
The bar variable holds a bar chart config and pie holds a pie chart config but both had the same datastore attached to their store: configs.
When the user pressed the format button I called this function to remove the chart from the panel and create one with the different format. It achieved the desired effect.