Charts

This package contains a wrapper for Apex Charts in Web Components as well as a implementation of a Pie Chart.

Other type of charts will be added in the future, but the wrapper is already ready to use and extend if you need something more specific.

Have a look at the Pie Chart implementation for an example of how to extend the generic wrapper.

Usage

Import

npm i @finastra/charts

import '@finastra/charts';
...
<fds-pie-chart width="380" data='[44, 55, 13, 43, 22]' label="['Apple', 'Mango', 'Orange', 'Watermelon', 'Wiki']"></fds-pie-chart>

API

Properties

| Property | Attribute | Type | Default | Description | | ----------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------------------------- | | $el | | HTMLElement \| null | null | | | chart | | ApexCharts \| null | null | | | chartTheme | | ChartTheme | | | | color | color | semantic-1\|semantic-2\|semantic-3\|categorical\|focus-1\|focus-2\|focus-1-angular\|focus-2-angular \|sequential-1\|sequential-2 | "categorical" | Define palette used by the chart | | height | height | string | "100%" | Height of the chart | | hideDataLabel | hide-data-label | boolean | false | Hide labels | | legendHorizontalAlign | legendHorizontalAlign | left\|center\|right | "center" | Define the horizontal alignment of legend | | legendPosition | legendPosition | top\|right\|bottom\|left | "bottom" | Define the position of the legend | | options | | ApexOptions | | | | override | | | | | | series | | ApexAxisChartSeries \| ApexNonAxisChartSeries | | | | type | | ChartType | | | | width | width | string | "100%" | Width of the chart |

Methods

| Method | Type | | -------------------------------- | ---------------------------------------- | | createChartEl | (): HTMLElement | | extend | <T>(target: T, source: Partial<T>): T | | getColor | (): any | | getDataLabelColor | (): string[] | | getStrokeColor | (): { stroke: { colors: string[]; }; } | | init | (): Promise<void> \| undefined | | initWatchers | (): void | | isObject | (item: any): boolean | | loadChartThemeFromCssVariables | (): void | | refresh | (): Promise<void> \| undefined |

fds-donut-chart

Properties

| Property | Attribute | Type | Default | Description | | ----------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------------------------- | | $el | | HTMLElement \| null | null | | | chart | | ApexCharts \| null | null | | | chartTheme | | ChartTheme | | | | color | color | semantic-1\|semantic-2\|semantic-3\|categorical\|focus-1\|focus-2\|focus-1-angular\|focus-2-angular \|sequential-1\|sequential-2 | "categorical" | Define palette used by the chart | | data | data | Array | "[]" | Data of the chart | | disableSelection | disable-selection | boolean | false | Disable selection | | height | height | string | "100%" | Height of the chart | | hideDataLabel | hide-data-label | boolean | false | Hide labels | | labels | labels | Array | "[]" | Labels correspond to value in data array | | legendHorizontalAlign | legendHorizontalAlign | left\|center\|right | "center" | Define the horizontal alignment of legend | | legendPosition | legendPosition | top\|right\|bottom\|left | "bottom" | Define the position of the legend | | options | | ApexOptions | | | | override | | | | | | series | | ApexAxisChartSeries \| ApexNonAxisChartSeries | | | | type | | string | "donut" | | | width | width | string | "100%" | Width of the chart |

Methods

| Method | Type | | -------------------------------- | ---------------------------------------- | | createChartEl | (): HTMLElement | | extend | <T>(target: T, source: Partial<T>): T | | getColor | (): any | | getDataLabelColor | (): string[] | | getStrokeColor | (): { stroke: { colors: string[]; }; } | | init | (): Promise<void> \| undefined | | initWatchers | (): void | | isObject | (item: any): boolean | | loadChartThemeFromCssVariables | (): void | | refresh | (): Promise<void> \| undefined | | toggleSelected | (): void |

fds-pie-chart

Properties

| Property | Attribute | Type | Default | Description | | ----------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------------------------- | | $el | | HTMLElement \| null | null | | | chart | | ApexCharts \| null | null | | | chartTheme | | ChartTheme | | | | color | color | semantic-1\|semantic-2\|semantic-3\|categorical\|focus-1\|focus-2\|focus-1-angular\|focus-2-angular \|sequential-1\|sequential-2 | "categorical" | Define palette used by the chart | | data | | number[] | | | | disableSelection | disable-selection | boolean | | | | height | height | string | "100%" | Height of the chart | | hideDataLabel | hide-data-label | boolean | false | Hide labels | | labels | | string[] | | | | legendHorizontalAlign | legendHorizontalAlign | left\|center\|right | "center" | Define the horizontal alignment of legend | | legendPosition | legendPosition | top\|right\|bottom\|left | "bottom" | Define the position of the legend | | options | | ApexOptions | | | | override | | | | | | series | | ApexAxisChartSeries \| ApexNonAxisChartSeries | | | | type | | string | "pie" | | | width | width | string | "100%" | Width of the chart |

Methods

| Method | Type | | -------------------------------- | ---------------------------------------- | | createChartEl | (): HTMLElement | | extend | <T>(target: T, source: Partial<T>): T | | getColor | (): any | | getDataLabelColor | (): string[] | | getStrokeColor | (): { stroke: { colors: string[]; }; } | | init | (): Promise<void> \| undefined | | initWatchers | (): void | | isObject | (item: any): boolean | | loadChartThemeFromCssVariables | (): void | | refresh | (): Promise<void> \| undefined | | toggleSelected | (): void |

fds-radial-bar-chart

Properties

| Property | Attribute | Type | Default | Description | | ----------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------- | | $el | | HTMLElement \| null | null | | | chart | | ApexCharts \| null | null | | | chartTheme | | ChartTheme | | | | color | color | semantic-1\|semantic-2\|semantic-3\|categorical\|focus-1\|focus-2\|focus-1-angular\|focus-2-angular \|sequential-1\|sequential-2 | "categorical" | Define palette used by the chart | | data | data | Array | "[]" | Data of the chart | | height | height | string | "100%" | Height of the chart | | hideDataLabel | hide-data-label | boolean | false | Hide labels | | hideLabels | hide-labels | Boolean | false | Hide the labels and display only the value, | | labels | labels | Array | "[]" | Labels correspond to value in data array | | legendHorizontalAlign | legendHorizontalAlign | left\|center\|right | "center" | Define the horizontal alignment of legend | | legendPosition | legendPosition | top\|right\|bottom\|left | "bottom" | Define the position of the legend | | options | | ApexOptions | | | | override | | | | | | series | | ApexAxisChartSeries \| ApexNonAxisChartSeries | | | | totalLabel | total-label | String | "" | Total label, visible only with multiple data | | type | | string | "radialBar" | | | width | width | string | "100%" | Width of the chart |

Methods

| Method | Type | | -------------------------------- | ---------------------------------------- | | createChartEl | (): HTMLElement | | extend | <T>(target: T, source: Partial<T>): T | | getColor | (): any | | getDataLabelColor | (): string[] | | getStrokeColor | (): { stroke: { colors: string[]; }; } | | init | (): Promise<void> \| undefined | | initWatchers | (): void | | isObject | (item: any): boolean | | loadChartThemeFromCssVariables | (): void | | refresh | (): Promise<void> \| undefined |

fds-line-chart

Properties

| Property | Attribute | Type | Default | Description | | ----------------------- | ----------------------- | -------------------------- | ------------- | ----------------------------------------- | | $el | | HTMLElement \| null | null | | | chart | | ApexCharts \| null | null | | | chartTheme | | ChartTheme | | | | color | color | categorical | "categorical" | Define palette used by the chart | | series | | Object | [name, data] | Set of data | | height | height | string | "100%" | Height of the chart | | hideDataLabel | hide-data-label | boolean | false | Hide data labels | | legendHorizontalAlign | legendHorizontalAlign | left\|center\|right | "center" | Define the horizontal alignment of legend | | legendPosition | legendPosition | top\|right\|bottom\|left | "bottom" | Define the position of the legend | | options | | ApexOptions | | | | override | | | | | | type | | string | "pie" | | | width | width | string | "100%" | Width of the chart | | xaxis | | Object | | Define axis X and its properties | | yaxis | | Object | | Define axis X and its properties | | showToolbar | show-toolbar | boolean | true | Display toolbar from the top right corner | | stroke | stroke | Object | | Define stroke and its properties | | strokeCurve | stroke-curve | string | | Define curve type | | tooltip | tooltip | Object | | Define tooltip and its properties |

Methods

| Method | Type | | -------------------------------- | ---------------------------------------- | | createChartEl | (): HTMLElement | | extend | <T>(target: T, source: Partial<T>): T | | getColor | (): any | | getDataLabelColor | (): string[] | | getStrokeColor | (): { stroke: { colors: string[]; }; } | | init | (): Promise<void> \| undefined | | initWatchers | (): void | | isObject | (item: any): boolean | | loadChartThemeFromCssVariables | (): void | | refresh | (): Promise<void> \| undefined |

CSS Custom Properties

| Property | Default | Description | | --------------------- | ------------------------ | ----------- | | --fds-radial-label | " var(--fds-body-3)" | Label size | | --fds-radial-value | " var(--fds-headline-2)" | Label size |