No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

WebChartPieChartSeries

JSON representation of the Pie Chart series.

Referenced by: WebChartSeriesType

Properties

PropertyDetails
type*

Represents a unique string identifier for the PieSeries object. For PieSeries object, it is pieSeries.


The type of this property is: string.

y*

Specifies which field represents the y-coordinates of this series. Empty string or one with just white spaces is not allowed. At least 1 or more word characters (a-z, A-Z, _) are needed.


The type of this property is: string.

innerRadius

Represents the size of the hole in middle of the chart. The number is used as a percentage rather than a fixed value.


The type of this property is: null or number.

startAngleThe type of this property is: null or number.
endAngleThe type of this property is: null or number.
fillSymbolContains styling info on how the slices should be rendered
displayNumericValueOnDataLabel

Indicates whether the numeric value associated to a slice is to be displayed on its data label.


If both displayNumericValue & displayPercentage are true on a same label, they will be displayed as percentage (value).


This property will be ignored if the chart options dataLabelFormatter is provided.


The type of this property is: boolean.

displayPercentageOnDataLabel

Indicates whether the percentage associated to a slice is to be displayed on its data label.


If both displayNumericValue & displayPercentage are true on a same label, they will be displayed as percentage (value)


This property will be ignored if the chart options dataLabelFormatter is provided.


The type of this property is: boolean.

displayNumericValueOnTooltip

Indicates whether the numeric value associated to a slice is to be displayed on its tooltip.


If both displayNumericValue & displayPercentage are true on a same label, they will be displayed as percentage (value)


This property will be ignored if the chart options tooltipFormatter is provided.


The type of this property is: boolean.

displayPercentageOnTooltip

Indicates whether the percentage associated to a slice is to be displayed on its tooltip.


If both displayNumericValue & displayPercentage are true on a same label, they will be displayed as percentage (value)


This property will be ignored if the chart options tooltipFormatter is provided.


The type of this property is: boolean.

numericValueFormat

Specifies how the numerical values should be formatted (applied to label, tooltip and legend).


Can be overridden for the tooltips by series.dataTooltipValueFormat.

percentValueFormat

Specifies how the percent values should be formatted (applied to label, tooltip and legend)


Can be overridden for the tooltips by series.dataTooltipPercentFormat.

valuePrefix

Adds a prefix to all the values displayed on the pie chart: data labels, tooltips and legend


The type of this property is: string.

valueSuffix

Adds a suffix to all the values displayed on the pie chart: data labels, tooltips and legend


The type of this property is: string.

percentagePrefix

Adds a prefix to all the percentages displayed on the pie chart: data labels, tooltips and legend


The type of this property is: string.

percentageSuffix

Adds a suffix to all the percentages displayed on the pie chart: data labels, tooltips and legend


The type of this property is: string.

dataLabelsCharacterLimit

If set, the category on the data label is truncated to display only characterLimit characters, and an ellipsis (...)


is added to the end of the label.


This does not affect the value and percentage part of the labels.


Does not apply to tooltips and legend labels.


The type of this property is: null or number.

ticks

Specifies how to render the ticks shown on each slide.


Ticks will be displayed with default values if not provided.

dataLabelsOffset

Determines in pixel how far the data labels should be placed from their slice.


If a negative value is provided the label will be placed inside of the chart.


The type of this property is: number.

alignDataLabels

Aligns labels into columns to make them more readable and avoid them to overlap each other.


The type of this property is: boolean.

optimizeDataLabelsOverlapping

Optimizes the data labels rendering to avoid them to be cut off on the edges or to overlap the legend by wrapping them and adding padding to the chart.


The type of this property is: boolean.

sliceGroupingSpecifies if and how the slices under a given percentage threshold are grouped into a unique slice
slices

An array of WebChartPieChartSlice representing the ids, labels and styles of the pie slices.



When this property is not defined, or when a pie slice does not have a matching slice in this array,


the series' fillSymbol will be used. If the series' fillSymbol does not contain color information, colors from the


color ramps will be utilized.


The type of this property is: array.

id*

A unique string used to differentiate the series on a chart.


The type of this property is: string.

visible

Hides or shows the series. If the series is has visible set to false, the corresponding legend is grayed out in the legend box.


The type of this property is: boolean.

dataTooltipVisible

Hides or shows data tooltips.


Applies to all charts but Gauge.


The type of this property is: boolean.

dataTooltipReverseColor

Indicates whether to apply the hovered element's color to the background (false) or the outline (true).


Applies to all charts but Gauge.


The type of this property is: boolean.

dataTooltipValueFormatDefines how to render numeric values in tooltips.
dataTooltipPercentFormat

Defines how to render percent values in tooltips.


Currently used for stacked 100% bar and line charts, as well as pie charts.

dataTooltipDateFormat

Defines how to render dates in tooltips.


Currently used for bar and line charts using a date x-axis with no time binning.

name*

Specifies the name of the series. It would be reflected in the chart legends


The type of this property is: string.

query

Specifies a query object associated with a particular series containing info on what data to fetch for that series.

x*

Specifies which field represents the x-coordinates of this series. Empty string or one with just white spaces is not allowed. At least 1 or more word characters (a-z, A-Z, _) are needed.


The type of this property is: string.

dataLabelsSpecifies how the data labels should be rendered.
assignToSecondValueAxis

Specifies whether the series should be assigned to the second value axis, when the axes property defines it.


Supported by bar and line series.


The type of this property is: boolean.