• Public
  • Public/Protected
  • All

Charts powered by ngx-charts library.

Example of usage

Simple pie chart

export const component: DraymanComponent = async ({ forceUpdate }) => {
    return () => (
                    { name: 'Cherries', value: 10 },
                    { name: 'Blueberries', value: 20 },




Optional activeEntries

activeEntries: any[]

Elements to highlight.

Optional angleSpan

angleSpan: number

The angle that the chart spans (in degrees).

Optional animations

animations: boolean

Enable animations.

Optional arcWidth

arcWidth: number

Arc width, expressed as a fraction of outer radius.

Optional autoScale

autoScale: boolean

Set the minimum value of the y axis to the minimum value in the data, instead of 0 (ignored if yScaleMin is defined).

Optional bandColor

bandColor: string

Color of the card color-bar, defaults to color based on value and scheme.

Optional barPadding

barPadding: number

Padding between bars in px.

Optional bigSegments

bigSegments: number

Number of big segments on the axis.

Optional cardColor

cardColor: string

Color of the card background, defaults to color based on value and scheme.

Optional customColors

customColors: any

Custom colors for the chart. Used to override a color for a specific value.

Optional doughnut

doughnut: boolean

Show doughnut instead of pie slices.

Optional emptyColor

emptyColor: string

Color of empty card slots.

Optional explodeSlices

explodeSlices: boolean

Make the radius of each slice proportional to it's value.

Optional gradient

gradient: boolean

Fill elements with a gradient instead of a solid color.

Optional innerPadding

innerPadding: number | number[]

Padding around each card in px.

Optional labels

labels: boolean

Show or hide lables.

Optional legend

legend: boolean

Show or hide legend.

Optional legendPosition

legendPosition: "right" | "below"

Optional legendTitle

legendTitle: string

Optional max

max: number

Ending point of the scale.

Optional maxLabelLength

maxLabelLength: number

Maximum length of the labels. If trimLabels is true, labels over this length will be trimmed.

Optional min

min: number

Starting point of the scale.

Optional onSelect

onSelect: ElementEvent<{ data: any }>

Executed when user interacts with the chart. Emits data defined by onSelect output of ngx-charts library.

Optional rangeFillOpacity

rangeFillOpacity: number

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.

Optional ref

ref: string

Optional referenceLines

referenceLines: any[]

An array of reference lines to be shown behind the chart. Every reference line should be of format {name, value}.


results: any[]

Chart data.

Optional roundDomains

roundDomains: boolean

Round domains for aligned gridlines.

Optional roundEdges

roundEdges: boolean

Optional scheme

scheme: any

Color scheme of the chart.

Optional schemeType

schemeType: "ordinal" | "linear"

Color scale type.

Optional showAxis

showAxis: boolean

Optional showDataLabel

showDataLabel: boolean

Display value number next to the bar.

Optional showGridLines

showGridLines: boolean

Optional showRefLabels

showRefLabels: boolean

Optional showRefLines

showRefLines: boolean

Optional showXAxisLabel

showXAxisLabel: boolean

Show or hide the x axis label.

Optional showYAxisLabel

showYAxisLabel: boolean

Show or hide the y axis label.

Optional smallSegments

smallSegments: number

Number of small segments between every big segment.

Optional startAngle

startAngle: number

The angle that the chart is rotated by. Use negative half of the spanning angle to centralize.

Optional style

style: CSS

Optional textColor

textColor: string

Color of the card text, defaults to the inverse of the card color.

Optional timeline

timeline: boolean

Display a timeline control under the chart. Only available if x scale is date.

Optional tooltipDisabled

tooltipDisabled: boolean

Optional trimLabels

trimLabels: boolean


type: "pie" | "verticalBar" | "numberCard" | "gauge" | "areaNormalized" | "areaStacked" | "line"

Optional units

units: string

Text to display under the value.

Optional xAxis

xAxis: boolean

Show or hide the x axis.

Optional xAxisLabel

xAxisLabel: string

Optional xAxisTicks

xAxisTicks: boolean

Trim or don't trim ticks on the x axis.

Optional xScaleMax

xScaleMax: any

The maximum value of the x axis (if the x scale is linear or time).

Optional xScaleMin

xScaleMin: any

The minimum value of the x axis (if the x scale is linear or time).

Optional yAxis

yAxis: boolean

Show or hide the y axis.

Optional yAxisLabel

yAxisLabel: string

Optional yAxisTicks

yAxisTicks: boolean

Trim or don't trim ticks on the y axis.

Optional yScaleMax

yScaleMax: number

Maximum value of the y axis (ignored if chart data contains a higher value)

Optional yScaleMin

yScaleMin: number

Minimum value of the y axis (ignored if chart data contains a lower value)