CODEWITHSUNDEEP
javascriptchart.js
shashisp
shashisp

Reputation: 2969

How to vary the thickness of doughnut chart, using ChartJs.?

How to vary the thickness of doughnut chart, using ChartJs

Upvotes: 69

Views: 100621

Answers (9)

ACS
ACS

Reputation: 41

In my case(Version 3), var options = { cutout: 40 }; worked

Upvotes: 0

tetchen9
tetchen9

Reputation: 1698

since version 2 the field has been renamed to cutoutPercentage.

cutoutPercentage
Number 50 - for doughnut, 0 - for pie
The percentage of the chart that is cut out of the middle.

It can be used like this

var options = {        
    cutoutPercentage: 40
};

more details here http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options

Update: Since version 3

var options = {        
    cutout: 40
};

var options = {        
    cutout: '40%'
};

According to the documentation at release notes of 3.x

Doughnut cutoutPercentage was renamed to cutout and accepts pixels as numer and percent as string ending with %.

Upvotes: 154

Hamada
Hamada

Reputation: 1898

In ng2-chart v3 with new types, in configraution option need to add chart type;

**ChartConfiguration<'doughnut'>['options']** 


doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
    cutout: '50%', // percentage of chart to cut out of the middle
    //cutout: 100, // pixels
};

Upvotes: 1

thermostat42
thermostat42

Reputation: 1

For vue-chartjs (tested with Nuxt), if setting options doesn't work, try :

Chart.defaults.doughnut.cutoutPercentage = 80

Note that it will change all the doughnuts cutout.

Upvotes: 0

Shri ram
Shri ram

Reputation: 71

I wanted to add how to achieve this exactly in React.

this.myChart = new Chart(this.chartRef.current, {
  type: 'doughnut',
  options: {
    cutout:120
  },
  data: {
    labels: this.props.data.map(d => d.label),
    datasets: [{
      data: this.props.data.map(d => d.value),
      backgroundColor:  Object.values(CHART_COLORS)
    }]
  }
});}

Upvotes: 5

athul raj
athul raj

Reputation: 196

Since version 3 the field has been renamed to cutout.

It can be used like this since version 3 the field has been renamed to cutout.

50% - for doughnut, 0 - for pie

It can be used like this

cutout description

var option = {
    cutout:40
}

https://www.chartjs.org/docs/latest/charts/doughnut.html

Upvotes: 9

Tim Dobbins
Tim Dobbins

Reputation: 61

If you are using chart.js for Angular via ng2-charts you would do something like this in your component.html file: 

// component.html file

<canvas baseChart [options]='chartOptions'>
</canvas>

// Do note that other required directives are missing in this example, but that I chose to highlight the 'options' directive

And do something like this in your component.ts file:

//component.ts file

chartOptions = {
  cutoutPercentage: 80
};

A helpful source of information: available chart directives and config options for the [options] directive

Upvotes: 6

Naresh Narasimhalu
Naresh Narasimhalu

Reputation: 441

var options = {        
     cutoutPercentage: 70
};

Upvotes: 44

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

use, percentageInnerCutout, like:

var options = {        
    percentageInnerCutout: 40
};
myNewChart = new Chart(ct).Doughnut(data, options);

Demo:: jsFiddle

Upvotes: 24

Related Questions