CODEWITHSUNDEEP
typescriptd3.jschartsc3.jsdonut-chart
Nishant Koli
Nishant Koli

Reputation: 71

How to make a C3 donut chart to a semi circle or a half donut chart in typescript?

Is it possible to create a half donut chart or a semi circle donut chart by modifying the C3 library code with a start angle and an end angle?

Trying to make something like the image in d3/c3 with typescript

Upvotes: 4

Views: 3171

Answers (1)

intotecho
intotecho

Reputation: 5684

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 enter image description here

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

Upvotes: 3

Related Questions