<dt-sunburst-chart noSelectionLabel="All" [series]="series">
<ng-template dtSunburstChartOverlay let-tooltip>
{{ tooltip.label }}: {{ tooltip.value }}
</ng-template>
</dt-sunburst-chart>
Imports
You have to import the DtSunburstChartModule
when you want to use the
<dt-sunburst-chart>
:
@NgModule({
imports: [DtSunburstChartModule],
})
class MyModule {}
Example setup
<dt-sunburst-chart
noSelectionLabel="All"
[series]="series"
valueDisplayMode="percent"
>
<ng-template dtSunburstChartOverlay let-tooltip>
{{ tooltip.label }}: {{ tooltip.valueRelative * 100 | dtPercent }}
</ng-template>
</dt-sunburst-chart>
Initialization
To create a dtSunburstChart
in a minimal configuration, only series
attribute is required to create a valid output. Only 3 levels are allowed at the
moment
<dt-sunburst-chart noSelectionLabel="All" [series]="series">
<ng-template dtSunburstChartOverlay let-tooltip>
{{ tooltip.label }}: {{ tooltip.value }}
</ng-template>
</dt-sunburst-chart>
Options & Properties
DtSunburstChart
Inputs
Name | Type | Default | Description |
---|---|---|---|
series |
DtSunburstChartNode[] |
- | Array of nodes with their children (i.e [A,B,C]). |
selected |
DtSunburstChartNode[] |
- | Array of selected nodes (i.e [A, A.1, A.1.a]). |
noSelectionLabel |
string |
All |
Label to be shown when there's no selection. |
valueDisplayMode |
'absolute' | 'percent' |
'absolute' |
Mode of value visualization. It can be percent or absolute . |
Outputs
Name | Type | Description |
---|---|---|
selectedChange |
EventEmitter<DtSunburstChartNode[]> |
Event that fires when a node is clicked with an array of selected nodes (i.e [A, A.1, A.1.a]). |
Methods
Name | Params | Description |
---|---|---|
openOverlay |
node: DtSunburstChartTooltipNode> |
Open an overlay for the given node. |
closeOverlay |
Closes the overlay if open. |
DtSunburstChartOverlay
The dtSunburstChartOverlay
directive applies to an ng-template
element lets
you provide a template for the rendered overlay. The overlay will be shown when
a user hovers the slice in sunburst-chart. tooltip
is a
DtSunburstChartTooltipData
.
<ng-template dtSunburstChartOverlay let-tooltip>
<!-- Insert your template for one event here. -->
</ng-template>
DtSunburstChartNode
This DtSunburstChartNode
holds the information for every slice in the chart.
Name | Type | Optional | Description |
---|---|---|---|
label |
string |
No | Name of the node to be shown. |
value |
number |
Yes if it has children | Numeric value used to calculate the slices. If it has children you can skip it and it will be calculated based on them. |
color |
DtColors | string |
Yes | Color to be used. Fallback to sorted chart colors. |
children |
DtSunburstChartNode[] |
Yes | Array of nodes belonging to this parent. |
DtSunburstChartTooltipData
The context of the overlay will be set to DtSunburstChartTooltipData object containing useful information that can be used inside the overlay's template
Name | Type | Description |
---|---|---|
origin |
DtSunburstChartNode |
Node passed by user in series array. |
id |
string |
Internal identifier. |
label |
string |
Name of the node to be shown. Copied from origin.label . |
value |
number |
Numeric value. Copied from origin.value or calculated from origin.children . |
valueRelative |
number |
Numeric percentage value based on this node vs sum of top level. |
children |
DtSunburstChartTooltipData[] |
Array of nodes belonging to this parent. |
depth |
number |
Number of levels of children. |
color |
DtColors | string |
Color for this node in this state. |
colorHover (deprecated) |
DtColors | string |
Color for this node when hovering in this state. |
isCurrent |
boolean |
If node is the deepest selected one. |
visible |
boolean |
If node is visible in the sunburst-chart. |
active |
boolean |
If node or child are selected. |
showLabel |
boolean |
If label should be shown based on selection and a minimum angle of slice. |
Examples
Default
<dt-sunburst-chart noSelectionLabel="All" [series]="series">
<ng-template dtSunburstChartOverlay let-tooltip>
{{ tooltip.label }}: {{ tooltip.value }}
</ng-template>
</dt-sunburst-chart>
Percent values
<dt-sunburst-chart
noSelectionLabel="All"
[series]="series"
valueDisplayMode="percent"
>
<ng-template dtSunburstChartOverlay let-tooltip>
{{ tooltip.label }}: {{ tooltip.valueRelative * 100 | dtPercent }}
</ng-template>
</dt-sunburst-chart>
Custom color
<dt-sunburst-chart noSelectionLabel="Fruits" [series]="series">
<ng-template dtSunburstChartOverlay let-tooltip>
{{ tooltip.label }}: {{ tooltip.value }}
</ng-template>
</dt-sunburst-chart>