The radial chart component is used to display one or more data series either as pie chart or donut chart.

<dt-radial-chart>
  <dt-radial-chart-series
    *ngFor="let s of _chartSeries"
    [value]="s.value"
    [name]="s.name"
  >
  </dt-radial-chart-series>
</dt-radial-chart>
<dt-radial-chart type="donut">
  <dt-radial-chart-series
    *ngFor="let s of _chartSeries"
    [value]="s.value"
    [name]="s.name"
  >
  </dt-radial-chart-series>
</dt-radial-chart>

Imports

You have to import the DtRadialChartModule when you want to use the <dt-radial-chart>:

@NgModule({
  imports: [DtRadialChartModule],
})
class MyModule {}

DtRadialChart inputs

Name Type Default Description
type 'pie' | 'donut' 'pie' The chart type; can be either a pie chart or a donut chart.
maxValue number null The maximum chart value that defines the full circle. If not set the maximum value is equal to the sum of all chart series values.
legendPosition 'right' | 'bottom' right Defines where the chart's legend is placed.

Max value

When no maximum value is given, all series data add up to 100%, i.e. a full circle. It's optional to define a maximum value. If the sum of all series values is below this value, the missing part of the circle is filled with a background color. If the sum of all series values is above the defined maxium value, this value is ignored.

<dt-radial-chart [maxValue]="_maxValue">
  <dt-radial-chart-series
    *ngFor="let s of _chartSeries"
    [value]="s.value"
    [name]="s.name"
  >
  </dt-radial-chart-series>
</dt-radial-chart>

Legend

A radial chart always needs a legend. It uses the legend component internally. You can specify the position of the radial chart by adjusting the value of the legendPosition input.

<button dt-button variant="secondary" (click)="toggleLegendPosition()">
  Toggle legend position
</button>
<dt-radial-chart [legendPosition]="legendPosition">
  <dt-radial-chart-series
    *ngFor="let s of _chartSeries"
    [value]="s.value"
    [name]="s.name"
  >
  </dt-radial-chart-series>
</dt-radial-chart>

DtRadialChartSeries inputs

Name Type Default Description
value number - The series value (required).
name string - The series name (required).
color string DT_CHART_COLOR_PALETTE_ORDERED[i] The color in which the series is displayed within the chart.

Series color

Each series can have a custom color. When no color is given for a series, the predefined chart colors are used.

<dt-radial-chart type="donut">
  <dt-radial-chart-series
    *ngFor="let s of _chartSeries"
    [value]="s.value"
    [name]="s.name"
    [color]="s.color"
  >
  </dt-radial-chart-series>
</dt-radial-chart>

Overlay

A radial chart can have an overlay to display detailed information about the series.

<dt-radial-chart>
  <dt-radial-chart-series
    *ngFor="let s of _chartSeries"
    [value]="s.value"
    [name]="s.name"
  >
  </dt-radial-chart-series>
  <ng-template dtRadialChartOverlay let-series>
    <strong>{{ series.name }}</strong>: {{ series.value }} of {{
    series.totalValue | number }}
  </ng-template>
</dt-radial-chart>