score:1

Accepted answer

i finally got it to work with version 2.x. i basically flattened the heirarchical data structure and padded the multiple dataset arrays with zeros. below is the code that will give you two layer doughnut chart with the second layer showing the split of the first layer section.

public summarytreechartlabels: label[] = ['asdf', 'sdgf', 'dfhg', 'asdf_1', 'asdf_2', 'sdgf_1', 'sdgf_2', 'dfgh_1', 'dfgh_2'];

public summarytreechartdata = [[34, 50, 26, 0,0,0,0,0,0], [0,0,0, 14, 20, 30, 20, 10, 16]];

public summarytreecharttype: charttype = 'doughnut';

enter image description here

score:0

you can use object notation for this together with a custom tooltip label callback:

var options = {
  type: 'doughnut',
  data: {
    datasets: [{
        label: '# of votes',
        data: [{
          id: 'parent1',
          key: 55
        }, {
          id: 'parent2',
          key: 55
        }, {
          id: 'parent3',
          key: 30
        }],
        borderwidth: 1,
      },
      {
        label: '# of points',
        data: [{
          id: 'child1',
          key: 55
        }, {
          id: 'child2',
          key: 55
        }, {
          id: 'child3',
          key: 30
        }, {
          id: 'child4',
          key: 55
        }, {
          id: 'child5',
          key: 55
        }, {
          id: 'child6',
          key: 30
        }],
        borderwidth: 1
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (ttitem) => (`${ttitem.raw.id}: ${ttitem.raw.key}`)
        }
      }
    },
    parsing: {
      key: 'key'
    }
  }
}

var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
  <canvas id="chartjscontainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.6.0/chart.js"></script>
</body>


Related Query

More Query from same tag