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.
Related
I am trying to implement the following design:
However, I can't seem to find implementations of this kind of a background container anywhere in the React pie chart libraries I've found. I'm attempting to use react-minimal-pie-chart as they seemed to indicate the ability to render a React component as a custom label:
However, anything custom I do that isn't an svg element fails. Every example I've seen simply uses a <text> element and no background, and I'm not well-versed enough on svgs to see a parallel to divs with text inside. I see you can create a <rect> but not a way to plop some dynamic text inside.
Is there a way I'm missing to do this with this library? Or has anyone successfully implemented this with another pie chart library?
I'm displaying a Chart.js doughnut chart via react-chartjs-2 in React, and by default, there are these line-box things showing for each doughnut section. Here's an example:
What are these line-box things called, and how do I turn them off?
Also, for what it's worth, they don't seem to show up by default in the base Chart.js library, but they show up for doughnut (and probably pie) charts in the react-chartjs-2 npm package. I've searched and searched, and tried toggling a bunch of options for the legend, legend labels and tooltips, but to no avail. I cannot figure out how to turn these off. Thank you for your help.
Thanks again to LeeLanalee for pointing me in the right direction.
Unbeknownst to me, there was a Chart.js global plugin set up for all the doughnut charts called chartjs-plugin-piechart-outlabels (https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels). As per following SO post, I was able to disable the line-box labels for specific instances of the doughnut charts (in React) as follows:
ChartJs - Pie Chart - how to remove labels that are on the pie chart
options={ {
plugins: {
outlabels: false
}
} }
Thanks again!
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
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 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).