Elements to highlight.
The angle that the chart spans (in degrees).
Enable animations.
Arc width, expressed as a fraction of outer radius.
Set the minimum value of the y axis to the minimum value in the data, instead of 0 (ignored if yScaleMin is defined).
Color of the card color-bar, defaults to color based on value and scheme.
Padding between bars in px.
Number of big segments on the axis.
Color of the card background, defaults to color based on value and scheme.
Custom colors for the chart. Used to override a color for a specific value.
Show doughnut instead of pie slices.
Color of empty card slots.
Make the radius of each slice proportional to it's value.
Fill elements with a gradient instead of a solid color.
Padding around each card in px.
Show or hide lables.
Show or hide legend.
Ending point of the scale.
Maximum length of the labels. If trimLabels is true, labels over this length will be trimmed.
Starting point of the scale.
Executed when user interacts with the chart.
Emits data defined by onSelect output of ngx-charts library.
Opacity of the shadow around the line indication the (optional) min and max values. The range shadow is only displayed if min and max values are provided with the data. The color of the shadow is alwas the color of the central line.
An array of reference lines to be shown behind the chart. Every reference line should be of format {name, value}.
Chart data.
Round domains for aligned gridlines.
Color scheme of the chart.
Color scale type.
Display value number next to the bar.
Show or hide the x axis label.
Show or hide the y axis label.
Number of small segments between every big segment.
The angle that the chart is rotated by. Use negative half of the spanning angle to centralize.
Color of the card text, defaults to the inverse of the card color.
Display a timeline control under the chart. Only available if x scale is date.
Text to display under the value.
Show or hide the x axis.
Trim or don't trim ticks on the x axis.
The maximum value of the x axis (if the x scale is linear or time).
The minimum value of the x axis (if the x scale is linear or time).
Show or hide the y axis.
Trim or don't trim ticks on the y axis.
Maximum value of the y axis (ignored if chart data contains a higher value)
Minimum value of the y axis (ignored if chart data contains a lower value)
<drayman-ngx-charts />
Charts powered by ngx-charts library.
Example of usage
Simple pie chart
export const component: DraymanComponent = async ({ forceUpdate }) => { return () => ( <drayman-ngx-charts type="pie" results={ [ { name: 'Cherries', value: 10 }, { name: 'Blueberries', value: 20 }, ] } labels /> ); }