In reactjs doughnut chart, How to reduce the width of the chart

Question

Width of the doughnut graph is not reducing.. how to reduce it

       graphData :{

            datasets:[
              {
             label : 'Customer Expense Analysis',
             data : [50,20],
             backgroundColor: [' #ffeb00','#a2a2a2'],
             hoverBackgroundColor:['#ffeb00','#a2a2a2'],
             labels: ["Free Parking Slot", "Total Parking Slot"],
             borderColor:'#363A42',
             boredrAlign: 'center',
             borderWidth: 1,
             cutoutPercentage:0                
              }
            ]
          },

             <Doughnut
              data= {this.state.graphData}
               options={{
                title: {
                display: this.props.displayTitle,
                fontSize: 40
                 },
                maintainAspectRatio: true,
                legend: {
                display: true,
                position: "left",
                  }
                }}
                />

border width increased but the distance between two data in the graph width is increased what to do???

score 2 · Answer 1 · answered Jul 23 '19 at 06:17

You need to pass width like this <Doughnut data={data} width={600} />

Here is a code:

import React from "react";
import { Line, Doughnut } from "react-chartjs-2";

const data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First dataset",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(75,192,192,1)",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};

export default class Hello extends React.Component {
  render() {
    return (
      <div>
        <h2>Line Example</h2>
        <Doughnut data={data} width={600} />
      </div>
    );
  }
}

Running code on codesandbox

Let me know if it worked.

Also, if you want a responsive chart. Here is guide for that:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Doughnut } from 'react-chartjs-2'

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      data: {
        datasets: [{
          data: [10, 20, 30]
        }],
        labels: [
          'Red',
          'Yellow',
          'Blue'
        ]
      }
    }
  }

  render() {
    return (

      <Doughnut
        data={this.state.data}
        options={{
          responsive: true,
          maintainAspectRatio: true,
        }}
      />
    )
  }
}

render(<App />, document.getElementById('root'));

Source of responsive chart. Running responsive code.

score 1 · Answer 2 · answered Jul 25 '19 at 05:05

In adding donut graph "cutoutPercentage: 80" to add we can get reduced width and reduced the border width " borderWidth: 0"

          graphData :{

            datasets:[
              {
                label : 'Customer Expense Analysis',
                data : [50,40],
                backgroundColor: [' #ffeb00','#a2a2a2'],
                hoverBackgroundColor:['#ffeb00','#a2a2a2'],
                labels: ["Free Parking Slot", "Total Parking Slot"],
                borderColor:'#363A42',
                boredrAlign: 'center',
                borderWidth: 0,
                outerRadius:'100%',
                innerRadius: "99%",
                cornerRadius:'7%',
                padAngle:'10'
              }
            ]
          },
                                  <Doughnut
                                      data={this.state.fourthgraph}
                                      options={{
                                      title: {
                                    display: this.props.displayTitle,
                                      fontSize: 10
                                      },
                                     maintainAspectRatio: true,
                                     legend: {
                                     display: true,
                                     position: "left",
                                     backgroundColor:red
                                      },
                                      cutoutPercentage: 80
                                     }}
                                    />

In reactjs doughnut chart, How to reduce the width of the chart

2 Answers2