[Solved]-How to make a C3 donut chart to a semi circle or a half donut chart in typescript?-d3.js

A donut is just a pie chart with a blank center. A gauge is closer to what you are displaying. c3.js has a gauge chart.

The dial color changes as the values go past thresholds. You want to show more than one parameter, eg. 50% in progress, of which 30% passed, 20% failed. etc. This is like a stacked chart, but displayed in an arc. For this you you want to specify a pattern.

There are some examples buried in the source code. Try this:

this.chart = c3.generate({
      bindto: bindToThis,
      data: {
        columns: [
          ['padded1', 100],
          ['padded2', 90],
          ['padded3', 50],
          ['padded4', 20]
        ],
        type: 'gauge',
      },
      color: {
        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
        threshold: {
          values: [30, 80, 95]
        }
      }

Which renders as

For typescript, there are some angular components like https://www.npmjs.com/package/angular-gauge. I can't find one that shows multiple variables without modification.

See also these examples in D3 that could be modified to dynamically change the background arcs angles to track the measured variables. The needle is optional.

How to customise Gauge needle pointer using D3.js or C3.js?

Or Gauge D3.js display value at the top of the needle enter link description here