Circle chart¶
The circle chart, displayed as a pie or donut chart, shows how much each part of something makes up the whole. Each arc length represents a proportion of each category, while the full circle represents the total sum of all the data, equal to 100%.
Usage¶
In order to use a donut or pie chart, there must be a whole amount that is divided into a number of distinct parts. The primary goal is to compare each part contribution to the whole, as opposed to comparing parts to each other.
Basic donut chart¶
A donut chart uses arc segments to display individual dimensions. When compared to pie charts, they are visually lighter and easier to read.
Donut chart with center label¶
If needed, the space in the middle can be used to display data.
Pie chart¶
Pie charts are visually heavy, be mindful about the size and colors selected to display the data.
Best practices¶
- Use pie charts sparingly.
- Don't plot more than five categories on the same circle chart. If needed, consider merging small slices into a single other slice.
- Don't use multiple circle charts to make comparisons between them.
- Consider the order of the categories, audiences will likely read the chart clockwise.
- Consider placing the chart values as part of the legend, especially when dealing with long numbers.
- The legend can be placed below or right to the circle chart. Use good judgement to select the best layout according to current need.
Design¶
- Circle chart, 2. Values, 3. Legend
Code¶
Usage¶
Required Packages
import { SiChartCircleComponent } from '@siemens/charts-ng';
@Component({
imports: [SiChartCircleComponent, ...]
})
Pie Chart¶
Donut Chart¶
SiChartCircleComponent API Documentation¶
si-chart-circle
Input Properties¶
Name | Type | Default | Description |
---|---|---|---|
additionalOptions ¶ | EChartOption | Used to override specific properties set in options . | |
autoZoomSeriesIndex ¶ | number | -1 | No auto dataZoom update) by default. Use together with visibleEntries . |
axisPointer ¶ | (undefined | string | boolean ) | false | Used to display axisPointer line either by click or mouse-move. |
customLegendAction ¶ | boolean | Enable custom legend click actions exposed by the selectionChanged event. | |
dataZoomFilterMode ¶ | FilterMode | 'none' | The data zoom filter mode. (see https://echarts.apache.org/en/option.html#dataZoom-inside.filterMode ) The value 'filter' will cause the lines to be disconnected to the outside of the chart. |
dataZoomMaxValueSpan ¶ | number | The upper limit of the data zoom slider (see https://echarts.apache.org/en/option.html#dataZoom-slider.maxValueSpan ). | |
dataZoomMinValueSpan ¶ | number | The lower limit of the data zoom slider (see https://echarts.apache.org/en/option.html#dataZoom-slider.minValueSpan ). | |
dataZoomRange ¶ | DataZoomRange | Apply a specific zoom range (see https://echarts.apache.org/en/option.html#dataZoom-inside ). | |
eChartContainerHeight ¶ | (null | string ) | The height of the ECharts container as decimal. | |
externalXAxisFormatter ¶ | (value: any , visibleRange: number ) => string | External XAxis Formatter from consumer | |
externalZoomSlider ¶ | boolean | false | Flag to use external zoom slider |
maxEntries ¶ | number | 1000 | Maximum number of series data points shown in the chart. |
options ¶ | EChartOption | See [ECharts 5.x Documentation] https://echarts.apache.org/en/option.html for all available options. | |
palette ¶ | string | undefined | The name of the color palette (if any) of the loaded theme . |
renderer ¶ | ("canvas" | "svg" ) | 'canvas' | the renderer to use: canvas or svg |
selectedItem ¶ | SelectedLegendItem | { legendItemName: '' } | Specify selected legend item. |
series ¶ | CircleChartSeries [] | The series for the chart. | |
showCustomLegend ¶ | boolean | false | Enable to show a custom legend. The custom legend offers additional features such as, scroll bar to avoid legend and chart overlapping, Left and right alignment of legends based on y-axis, etc and many more. |
showLegend ¶ | boolean | true | Show Echarts legend |
subTitle ¶ | string | The subtitle of the chart. | |
theme ¶ | any | The desired theme to load. | |
themeCustomization ¶ | any | Used to override specific options of loaded theme . | |
title ¶ | string | The title of the chart. | |
visibleEntries ¶ | number | -1 | No auto dataZoom update) by default. Use together with autoZoomSeriesIndex . |
visibleRange ¶ | number | -1 | No auto dataZoom update) by default. Use together with autoZoomSeriesIndex . |
zoomInside ¶ | boolean | false | Enables zooming inside the chart with the mouse wheel/touch. Whether zooming inside the chart is possible with mouse. |
zoomSlider ¶ | boolean | false | Enables the zoom slider below the chart. |
zoomSliderBrush ¶ | boolean | true | enable brush mode for zoom slider |
zoomSliderRealtime ¶ | boolean | true | realtime update mode for zoom slider |
zoomSliderShadow ¶ | boolean | true | Shows data shadow in dataZoom slider, use together with zoomSlider . |
showTimeRangeBar | boolean | false | If true, add consumer-provided time range bar. Use together with zoomSlider .Deprecated: The input will be removed in future versions as the time range bar slot is deprecated. |
Output Properties¶
Name | Type | Description |
---|---|---|
chartGridResized ¶ | GridRectCoordinate | Event emitted when chart grid is resized. |
chartSeriesClick ¶ | LegendItem | Event emitted when a chart series is clicked. |
customLegendMultiLineInfoEvent ¶ | CustomLegendMultiLineInfo [] | Event emitted when custom legend multi-line info changes. |
dataZoom ¶ | DataZoomEvent | Event emitted when data zoom changes. |
pointer ¶ | AxisPointerEvent | Event emitted when axis pointer moves. |
selectionChanged ¶ | any | Event emitted when selection changes e.g. clicking on a legend item. |
showLegendChange ¶ | boolean | Show Echarts legend |
timeRangeChange ¶ | number | Emitted when data zoom changes, indicating the time range in milliseconds, 0 for full range |
visibleEntriesChange ¶ | number | No auto dataZoom update) by default. Use together with autoZoomSeriesIndex . |
visibleRangeChange ¶ | number | No auto dataZoom update) by default. Use together with autoZoomSeriesIndex . |
Attributes and Methods¶
Name | Type | Default | Description |
---|---|---|---|
startProgressIndication() ¶ | () => void | Show loading indicator. | |
stopProgressIndication() ¶ | () => void | Hide loading indicator. |
Types Documentation¶
| |||||
|
|
|
|
|
|
|
|
|
|
|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
imported from echarts |
---|
imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
import imported from echarts |
---|
Except where otherwise noted, content on this site is licensed under MIT License.