Skip to content

Donut Chart

Sukanya Dasgupta edited this page Jul 25, 2019 · 3 revisions

Donut Chart in Angular

TypeScript:

donutChartData = [
    {
      name: 'Calcutta',
      color: '#EAC435',
      value: 50
    },
    {
      name: 'Madras',
      color: '#345995',
      value: 50
    },
    {
      name: 'Bombay',
      color: '#03CEA4',
      value: 50
    },
    {
      name: 'Delhi',
      color: '#FF6B6B',
      value: 50
    },
    {
      name: 'Bangalore',
      color: '#CA1551',
      value: 50
    }
  ];

HTML:

<ngx-donut-chart [width]="800"
[data]="donutChartData" colorScheme="colorful"></ngx-donut-chart>

Note: Instead of setting color of every category, as in the above example, you could also just set the attribute [colorScheme] to one of the available color schemes. List of available color schemes