REACT: How to build a half donut

Asked
Active3 hr before
Viewed126 times

8 Answers

react
90%

We can alter labels value is using callback function of react-google-chart like below. In callback function we can get to access of svg of pie chart., The data is calculated by google-charts. I don't know how to modificy the value of the labels – José Carlos May 16 '20 at 19:48 ,Connect and share knowledge within a single location that is structured and easy to search.

We can alter labels value is using callback function of react-google-chart like below. In callback function we can get to access of svg of pie chart.

<Chart

   chartEvents={[
   {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
          // const chart = chartWrapper.getChart();
          let svg = document.querySelector("svg");
          console.log("svg childNodes are ",svg.childNodes)

          // YOU CAN WRITE THIS CODE USING FOR EACH BUT FOR EASY UNDERSTANDING I WROTE LIKE THIS

          // first 2 children in svg are heading & label colors(sidenav)

          for(var i=3;i<svg.childNodes.length-1;i++) {
             var temp = svg.childNodes[i].childNodes[1].innerHTML;
             if(temp.length>3) {
                temp = temp.substring(0,3)
             }
             else {
                temp = temp.substring(0,2)
             }
             // doubling to make them as 100% summary
             temp = parseFloat(temp)*2;
             svg.childNodes[i].childNodes[1].innerHTML = temp+'%';


         }

       } 
       } 
 ]}


          width={this.state.width}
          height={"400px"}
          chartType="PieChart"
          loader={<div>Loading Chart</div>}
          data={this.props.data}
          options={{
            backgroundColor: "transparent",
            title: "Distribución de posesiones",
            pieHole: 0.4,
            pieStartAngle: 270,
            slices: {
              4: {
                color: "transparent"
              }
            }
          }}
/>
88%

I'm using this library to make all of my charts, and I want to make a "Half Doughnut" chart, something like this: ,Someone suggested I use an other library, but I don't to do that! I like to keep things uniform and I really like this particular library.,However, the options object doesn't contain a single parameter where I could change the Pie chart into a Half Pie chart ( Half Doughnut Chart ). And there is no pre-configured Half Doughnut chart! There isn't even a preconfigured Doughnut Chart .

Pretag
 Pretag team - issue, fix, solve, resolve
72%

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.,Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.,Please stand by, while we are checking your browser...

Pretag
 Pretag team - issue, fix, solve, resolve
65%

The Donut chart renders multiple series in the form of concentric rings. This behavior is different from the behavior of the Pie chart, which supports only one series.,Displaying Information in the CenterUsing the Center TemplateUsing Drawing Visuals,Using the Center Template

Pretag
 Pretag team - issue, fix, solve, resolve
75%

You can customize the inner radius of the chart to make it pleasing. Making inner radius to 0 will change the doughnut to pie chart. You can customize both the radius and inner radius of the doughnut.,Customize the start and end angle of the chart to achieve the semi-pie.,Customize the radius of individual slice using built-in APIs.

<!DOCTYPE html>
<html>

<body>
   <div id="charts"></div>
</body>

</html>
load more v
40%

It is possible to have a multiple ring display in the React Donut Chart, with each of the rings capable of being bound to a different data item, or they can share a common data source. This can be helpful if you need to display your data as tiers that have an underlying common category, such as the season to month data display below:,The Ignite UI for React Donut Chart is similar to the Pie Chart, proportionally illustrating the occurrences of a variable. The donut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data. The rings are capable of being bound to a different data item, or they can share a common data source.,Ensuring the color palette is distinguishable for segments/slices of the parts.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

Install react-native-svg:,Starting by middle one at the top:,Install victory-native:

Install victory-native:

 npm install victory - native--save
load more v
60%

ApexCharts is now a partner of FusionCharts

Pretag
 Pretag team - issue, fix, solve, resolve

Other "react-undefined" queries related to "REACT: How to build a half donut"