Swimlane Ngx Charts

https://github.com/swimlane/ngx-charts
Admin
Ngx Charts is a declarative charting framework for Angular that uses Angular to render and animate...
Tokens:32,929
Snippets:160
Trust Score:9.8
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Run demos locally

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/installing.md

Install dependencies, start the development server, and browse to localhost:9999.

```bash
npm i
```

```bash
npm start
```

--------------------------------

### Install ngx-charts via npm

Source: https://github.com/swimlane/ngx-charts/blob/master/README.md

Install the ngx-charts package using npm. This is the standard installation command for adding the library to an Angular project.

```bash
npm i @swimlane/ngx-charts --save
```

--------------------------------

### Gauge Chart data format (results input)

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/gauge-chart.md

Shows the expected shape of the results array consumed by the gauge chart. The example is a single object with name and value properties, as used by the chart's results input.

```typescript
{
  name: 'Gauge',
  value: 55
}
```

--------------------------------

### Heat Map Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/heat-map-chart.md

Lists all configurable input properties for the Heat Map Chart component, including their types, default values, and descriptions.

```APIDOC
## Heat Map Chart Inputs

### Description
Configurable input properties for the Heat Map Chart component.

### Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| view | number[] | undefined | The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size. |
| results | object[] | undefined | The chart data. |
| scheme | object | undefined | The color scheme of the chart. |
| animations | boolean | true | Enable animations. |
| legend | boolean | false | Show or hide the legend. |
| legendTitle | string | 'Legend' | The legend title. |
| legendPosition | string | 'right' | The legend position ['right', 'below']. |
| xAxis | boolean | false | Show or hide the x axis. |
| yAxis | boolean | false | Show or hide the y axis. |
| showXAxisLabel | boolean | false | Show or hide the x axis label. |
| showYAxisLabel | boolean | false | Show or hide the y axis label. |
| xAxisLabel | string | undefined | The x axis label text. |
| yAxisLabel | string | undefined | The y axis label text. |
| trimXAxisTicks | boolean | true | Trim or not ticks on the x axis. |
| trimYAxisTicks | boolean | true | Trim or not ticks on the Y axis. |
| rotateXAxisTicks | boolean | true | Enable automatic rotation of x-axis ticks to prevent overlaps. |
| maxXAxisTickLength | number | 16 | Max length of the ticks. If `trimXAxisTicks` is `true`, ticks over this length will be trimmed. |
| maxYAxisTickLength | number | 16 | Max length of the ticks. If `trimYAxisTicks` is `true`, ticks over this length will be trimmed. |
| xAxisTickFormatting | function | undefined | The x axis tick formatting. |
| yAxisTickFormatting | function | undefined | The y axis tick formatting. |
| xAxisTicks | any[] | undefined | Predefined list of x axis tick values. |
| yAxisTicks | any[] | undefined | Predefined list of y axis tick values. |
```

--------------------------------

### Bubble Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/bubble-chart.md

Lists all input properties for the Bubble Chart component that users can configure.

```APIDOC
## Bubble Chart Inputs

### Description
This section documents the input properties for the Bubble Chart component. Users can set these properties to customize the chart's appearance and behavior.

### Inputs

| Property | Type | Default Value | Description |
| --- | --- | --- | --- |
| view | number[] | | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
| results | object[] | | the chart data |
| scheme | object | | the color scheme of the chart |
| schemeType | string | 'ordinal' | the color scale type. Can be either 'ordinal' or 'linear' |
| customColors | function or object | | custom colors for the chart. Used to override a color for a specific value |
| animations | boolean | true | enable animations |
| legend | boolean | false | show or hide the legend |
| legendTitle | string | 'Legend' | the legend title |
| legendPosition | string | 'right' | the legend position ['right', 'below'] |
| xAxis | boolean | false | show or hide the x axis |
| yAxis | boolean | false | show or hide the y axis |
| showGridLines | boolean | true | show or hide the grid lines |
| roundDomains | boolean | false | round domains for aligned gridlines |
| showXAxisLabel | boolean | false | show or hide the x axis label |
| showYAxisLabel | boolean | false | show or hide the y axis label |
| xAxisLabel | string | | the x axis label text |
| yAxisLabel | string | | the y axis label text |
| rotateXAxisTicks | boolean | true | enable automic rotation of x-axis ticks to prevent overlaps |
| xAxisTickFormatting | function | | the x axis tick formatting |
| yAxisTickFormatting | function | | the y axis tick formatting |
| xAxisTicks | any[] | | predefined list of x axis tick values |
| yAxisTicks | any[] | | predefined list of y axis tick values |
| activeEntries | object[] | [] | elements to highlight |
```

--------------------------------

### Line Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/line-area-charts/line-chart.md

Lists the input properties for the Line Chart component that users can configure.

```APIDOC
## Line Chart Inputs

### Description
Configurable input properties for the Line Chart component.

### Properties

- **view** (number[]) - Optional - The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size.
- **results** (object[]) - Optional - The chart data.
- **scheme** (object) - Optional - The color scheme of the chart.
- **schemeType** (string) - Optional - The color scale type. Can be either 'ordinal' or 'linear'. Default: 'ordinal'.
- **customColors** (function or object) - Optional - Custom colors for the chart. Used to override a color for a specific value.
- **animations** (boolean) - Optional - Enable animations. Default: true.
- **rangeFillOpacity** (number) - Optional - Opacity of the shadow around the line indicating 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 always the color of the central line. Default: 0.15.
- **legend** (boolean) - Optional - Show or hide the legend. Default: false.
- **legendTitle** (string) - Optional - The legend title. Default: 'Legend'.
- **legendPosition** (string) - Optional - The legend position ['right', 'below']. Default: 'right'.
- **xAxis** (boolean) - Optional - Show or hide the x axis. Default: false.
- **yAxis** (boolean) - Optional - Show or hide the y axis. Default: false.
```

--------------------------------

### Gauge Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/gauge-chart.md

Configuration properties for the Gauge Chart component.

```APIDOC
## Gauge Chart Inputs

### Description
These are the input properties that can be set on the Gauge Chart component to customize its appearance and behavior.

### Inputs
- **view** (number[]) - Optional - The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size.
- **results** (object[]) - Optional - The chart data.
- **scheme** (object) - Optional - The color scheme of the chart.
- **customColors** (function or object) - Optional - Custom colors for the chart. Used to override a color for a specific value.
- **animations** (boolean) - Optional - Enable animations. Default: true.
- **legend** (boolean) - Optional - Show or hide the legend. Default: false.
- **legendTitle** (string) - Optional - The legend title. Default: 'Legend'.
- **min** (number) - Optional - Starting point of the scale. Default: 0.
- **max** (number) - Optional - Ending point of the scale. Default: 100.
- **units** (string) - Optional - Text to display under the value.
- **bigSegments** (number) - Optional - Number of big segments on the axis. Default: 10.
- **smallSegments** (number) - Optional - Number of small segments between every big segment. Default: 5.
- **showAxis** (boolean) - Optional - Show or hide the axis. Default: true.
- **axisTickFormatting** (function) - Optional - The axis tick formatting.
- **valueFormatting** (function) - Optional - Function that formats the value in the middle of the chart.
- **angleSpan** (number) - Optional - The angle that the chart spans (in degrees). Default: 240.
- **startAngle** (number) - Optional - The angle that the chart is rotated by. Use negative half of the spanning angle to centralize. Default: -120.
- **tooltipDisabled** (boolean) - Optional - Show or hide the tooltip. Default: false.
- **tooltipTemplate** (TemplateRef) - Optional - A custom ng-template to be displayed inside the tooltip.
- **showText** (boolean) - Optional - Show or hide the inner text. Default: true.
```

--------------------------------

### Box Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/box-chart.md

Lists the configurable input properties for the Box Chart component, including their types, default values, and descriptions.

```APIDOC
## Box Chart Inputs

### Description
This section documents the input properties that can be set on the Box Chart component to customize its appearance and behavior.

### Properties

- **view** (number[]) - Default: [600, 400] - The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size. Also, if one of the dimensions is zero or undefined, will fallback to the predefined values.

- **results** (BoxChartMultiSeries[]) - Default: - The chart data. Please refer to the below data format section for more info.

- **scheme** (string or object) - Default: - The color scheme of the chart. This accept either one of the color scheme enumerable string or an object with a domain property that contains an array of hex strings.

- **schemeType** (string) - Default: 'ordinal' - The color scale type. Can be either 'ordinal' or 'linear'.

- **customColors** (function or object) - Default: - Custom colors for the chart. Used to override a color for a specific value.

- **animations** (boolean) - Default: true - Enable animations.

- **legend** (boolean) - Default: false - Show or hide the legend.

- **legendTitle** (string) - Default: 'Legend' - The legend title.

- **legendPosition** (string) - Default: 'right' - The legend position. Can be either 'right' or 'below'.

- **xAxis** (boolean) - Default: true - Show or hide the x axis.

- **yAxis** (boolean) - Default: true - Show or hide the y axis.

- **showGridLines** (boolean) - Default: true - Show or hide the grid lines.

- **roundDomains** (boolean) - Default: false - Round domains for aligned gridlines (Only for Y Axis).

- **showXAxisLabel** (boolean) - Default: true - Show or hide the x axis label.

- **showYAxisLabel** (boolean) - Default: true - Show or hide the y axis label.

- **xAxisLabel** (string) - Default: - The x axis label text.

```

--------------------------------

### Heat Map Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/heat-map-chart.md

Configuration properties for the heat map chart component, including gradient, inner padding, tooltip settings, and tick wrapping.

```APIDOC
## Heat Map Chart Inputs

### Description
Configuration properties for the heat map chart component.

### Properties
- **gradient** (boolean) - Default: false - Fill elements with a gradient instead of a solid color.
- **innerPadding** (number or number[]) - Default: 8 - The inner padding in px.
- **tooltipDisabled** (boolean) - Default: false - Show or hide the tooltip.
- **tooltipText** (function) - Default: (see source) - The HTML text to display in the tooltip.
- **tooltipTemplate** (TemplateRef) - A custom ng-template to be displayed inside the tooltip.
- **wrapTicks** (boolean) - Default: false - Axis tick labels will wrap based on available space.
```

--------------------------------

### Bubble Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/bubble-chart.md

Configuration inputs for the Bubble Chart component.

```APIDOC
## Bubble Chart Inputs

### Description
These are the input properties that can be set on the Bubble Chart component to customize its behavior and appearance.

### Inputs

| Name | Type | Default | Description |
|------|------|---------|-------------|
| minRadius | number | 3 | minimum bubble radius in px |
| maxRadius | number | 10 | maximum bubble radius in px |
| tooltipDisabled | boolean | false | show or hide the tooltip |
| tooltipTemplate | TemplateRef | | a custom ng-template to be displayed inside the tooltip |
| xScaleMin | any | | the minimum value of the x axis (if the x scale is linear or time) |
| xScaleMax | any | | the maximum value of the x axis (if the x scale is linear or time) |
| yScaleMin | any | | the minimum value of the y axis (if the y scale is linear or time) |
| yScaleMax | any | | the maximum value of the y axis (if the y scale is linear or time) |
| wrapTicks | boolean | false | axis tick labels will wrap based on available space |
```

--------------------------------

### Area Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/line-area-charts/area-chart.md

Lists all configurable input properties for the Area Chart component, including their types, default values, and descriptions.

```APIDOC
## Area Chart Inputs

### Description
This section documents the input properties that can be set on the Area Chart component to customize its behavior and appearance.

### Inputs

| Property | Type | Default Value | Description |
| --- | --- | --- | --- |
| view | number[] | undefined | The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size. |
| results | object[] | undefined | The chart data. |
| scheme | object | undefined | The color scheme of the chart. |
| schemeType | string | 'ordinal' | The color scale type. Can be either 'ordinal' or 'linear'. |
| customColors | function or object | undefined | Custom colors for the chart. Used to override a color for a specific value. |
| animations | boolean | true | Enable animations. |
| legend | boolean | false | Show or hide the legend. |
| legendTitle | string | 'Legend' | The legend title. |
| legendPosition | string | 'right' | The legend position ['right', 'below']. |
| xAxis | boolean | false | Show or hide the x axis. |
| yAxis | boolean | false | Show or hide the y axis. |
| showGridLines | boolean | true | Show or hide the grid lines. |
| roundDomains | boolean | false | Round domains for aligned gridlines. |
| showXAxisLabel | boolean | false | Show or hide the x axis label. |
| showYAxisLabel | boolean | false | Show or hide the y axis label. |
| xAxisLabel | string | undefined | The x axis label text. |
| yAxisLabel | string | undefined | The y axis label text. |
| trimXAxisTicks | boolean | true | Trim or not ticks on the x axis. |
| trimYAxisTicks | boolean | true | Trim or not ticks on the Y axis. |
| rotateXAxisTicks | boolean | true | Enable automatic rotation of x-axis ticks to prevent overlaps. |
```

--------------------------------

### Stacked Horizontal Bar Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/bar-charts/stacked-horizontal-bar-chart.md

Lists the input properties for the Stacked Horizontal Bar Chart component, including their types, default values, and descriptions.

```APIDOC
## Stacked Horizontal Bar Chart Inputs

### Description
This section documents the input properties that can be set on the Stacked Horizontal Bar Chart component to customize its data, appearance, and behavior.

### Inputs

| Property | Type | Default Value | Description |
| --- | --- | --- | --- |
| view | number[] | | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
| results | object[] | | the chart data |
| scheme | object | | the color scheme of the chart |
| schemeType | string | 'ordinal' | the color scale type. Can be either 'ordinal' or 'linear' |
| customColors | function or object | | custom colors for the chart. Used to override a color for a specific value |
| animations | boolean | true | enable animations |
| legend | boolean | false | show or hide the legend |
| legendTitle | string | 'Legend' | the legend title |
| legendPosition | string | 'right' | the legend position ['right', 'below'] |
| xAxis | boolean | false | show or hide the x axis |
| yAxis | boolean | false | show or hide the y axis |
| showGridLines | boolean | true | show or hide the grid lines |
| roundDomains | boolean | false | round domains for aligned gridlines |
| showXAxisLabel | boolean | false | show or hide the x axis label |
| showYAxisLabel | boolean | false | show or hide the y axis label |
| xAxisLabel | string | | the x axis label text |
| yAxisLabel | string | | the y axis label text |
| trimXAxisTicks | boolean | true | trim or not ticks on the x axis |
| trimYAxisTicks | boolean | true | trim or not ticks on the Y axis |
| rotateXAxisTicks | boolean | true | enable automic rotation of x-axis ticks to prevent overlaps |
| maxXAxisTickLength | number | 16 | max length of the ticks. If `trimXAxisTicks` is `true`, ticks over this length will be trimmed |
| maxYAxisTickLength | number | 16 | max length of the ticks. If `trimYAxisTicks` is `true`, ticks over this length will be trimmed |
```

--------------------------------

### Stacked Area Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/line-area-charts/stacked-area-chart.md

Lists the input properties for the Stacked Area Chart component, including their types, default values, and descriptions.

```APIDOC
## Stacked Area Chart Inputs

### Description
Configurable input properties for the Stacked Area Chart component.

### Properties

| Property | Type | Default Value | Description |
| --- | --- | --- | --- |
| view | number[] | | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
| results | object[] | | the chart data |
| scheme | object | | the color scheme of the chart |
| schemeType | string | 'ordinal' | the color scale type. Can be either 'ordinal' or 'linear' |
| customColors | function or object | | custom colors for the chart. Used to override a color for a specific value |
| animations | boolean | true | enable animations |
| legend | boolean | false | show or hide the legend |
| legendTitle | string | 'Legend' | the legend title |
| legendPosition | string | 'right' | the legend position ['right', 'below'] |
| xAxis | boolean | false | show or hide the x axis |
| yAxis | boolean | false | show or hide the y axis |
| showGridLines | boolean | true | show or hide the grid lines |
| roundDomains | boolean | false | round domains for aligned gridlines |
| showXAxisLabel | boolean | false | show or hide the x axis label |
| showYAxisLabel | boolean | false | show or hide the y axis label |
| xAxisLabel | string | | the x axis label text |
| yAxisLabel | string | | the y axis label text |
| trimXAxisTicks | boolean | true | trim or not ticks on the x axis |
| trimYAxisTicks | boolean | true | trim or not ticks on the Y axis |
| rotateXAxisTicks | boolean | true | enable automic rotation of x-axis ticks to prevent overlaps |
```

--------------------------------

### Stacked Vertical Bar Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/bar-charts/stacked-vertical-bar-chart.md

Lists the configurable input properties for the stacked vertical bar chart component.

```APIDOC
## Inputs

### xAxisTickFormatting
- **Type**: function
- **Default**: (not specified)
- **Description**: The x axis tick formatting.

### yAxisTickFormatting
- **Type**: function
- **Default**: (not specified)
- **Description**: The y axis tick formatting.

### xAxisTicks
- **Type**: any[]
- **Default**: (not specified)
- **Description**: Predefined list of x axis tick values.

### yAxisTicks
- **Type**: any[]
- **Default**: (not specified)
- **Description**: Predefined list of y axis tick values.

### noBarWhenZero
- **Type**: boolean
- **Default**: true
- **Description**: Hide bar if value is 0 and setting is true.

### showDataLabel
- **Type**: boolean
- **Default**: false
- **Description**: Displays the value number next to the bar.

### gradient
- **Type**: boolean
- **Default**: false
- **Description**: Fill elements with a gradient instead of a solid color.

### activeEntries
- **Type**: object[]
- **Default**: []
- **Description**: Elements to highlight.

### barPadding
- **Type**: number
- **Default**: 8
- **Description**: Padding between bars in px.

### tooltipDisabled
- **Type**: boolean
- **Default**: false
- **Description**: Show or hide the tooltip.

### tooltipTemplate
- **Type**: TemplateRef
- **Default**: (not specified)
- **Description**: A custom ng-template to be displayed inside the tooltip.

### yScaleMax
- **Type**: number
- **Default**: (not specified)
- **Description**: The maximum value of the y axis (ignored if chart data contains a higher value).

### wrapTicks
- **Type**: boolean
- **Default**: false
- **Description**: Axis tick labels will wrap based on available space.
```

--------------------------------

### Horizontal Bar Chart Component Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/bar-charts/horizontal-bar-chart.md

Lists all configurable input properties for the Horizontal Bar Chart component, including types, default values, and descriptions.

```APIDOC
## Horizontal Bar Chart Inputs

### Description
This component renders a horizontal bar chart and accepts various input properties to customize its appearance and behavior.

### Inputs

| Property | Type | Default Value | Description |
| --- | --- | --- | --- |
| view | number[] | | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
| results | object[] | | the chart data |
| scheme | object | | the color scheme of the chart |
| schemeType | string | 'ordinal' | the color scale type. Can be either 'ordinal' or 'linear' |
| customColors | function or object | | custom colors for the chart. Used to override a color for a specific value |
| animations | boolean | true | enable animations |
| legend | boolean | false | show or hide the legend |
| legendTitle | string | 'Legend' | the legend title |
| legendPosition | string | 'right' | the legend position ['right', 'below'] |
| xAxis | boolean | false | show or hide the x axis |
| yAxis | boolean | false | show or hide the y axis |
| showGridLines | boolean | true | show or hide the grid lines |
| roundDomains | boolean | false | round domains for aligned gridlines |
| roundEdges | boolean | true | round the edges of the bars |
| showXAxisLabel | boolean | false | show or hide the x axis label |
| showYAxisLabel | boolean | false | show or hide the y axis label |
| xAxisLabel | string | | the x axis label text |
| yAxisLabel | string | | the y axis label text |
| trimXAxisTicks | boolean | true | trim or not ticks on the x axis |
| trimYAxisTicks | boolean | true | trim or not ticks on the Y axis |
| rotateXAxisTicks | boolean | true | enable automic rotation of x-axis ticks to prevent overlaps |
| maxXAxisTickLength | number | 16 | max length of the ticks. If `trimXAxisTicks` is `true`, ticks over this length will be trimmed |
```

--------------------------------

### Advanced Pie Chart data format (results input)

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/pie-charts/advanced-pie-chart.md

Shows the expected shape of the results array for the Advanced Pie Chart. Each entry provides the label and value used by the chart.

```typescript
[
  {
    name: 'Germany',
    value: 8940000
  },
  {
    name: 'USA',
    value: 5000000
  },
  {
    name: 'France',
    value: 7200000
  }
]
```

--------------------------------

### Pie Grid Chart Component

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/pie-charts/pie-grid-chart.md

The Pie Grid Chart component displays a grid of pie charts. It accepts configuration inputs for dimensions, data, styling, and behavior, and emits a select event on click.

```APIDOC
## Pie Grid Chart

### Description
The Pie Grid Chart component renders a grid of pie charts. It accepts configuration inputs for dimensions, data, styling, and behavior, and emits a select event on click.

### Inputs

| Property        | Type               | Default Value | Description                                                                                                                                                                                                          |
| --------------- | ------------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| view            | number[]           |               | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size                                                                                                    |
| results         | object[]           |               | the chart data                                                                                                                                                                                                       |
| scheme          | object             |               | the color scheme of the chart                                                                                                                                                                                        |
| customColors    | function or object |               | custom colors for the chart. Used to override a color for a specific value                                                                                                                                           |
| animations      | boolean            | true          | enable animations                                                                                                                                                                                                    |
| label           | string             | 'Total'       | the text to show under the total value                                                                                                                                                                               |
| tooltipDisabled | boolean            | false         | show or hide the tooltip                                                                                                                                                                                             |
| tooltipTemplate | TemplateRef        |               | a custom ng-template to be displayed inside the tooltip                                                                                                                                                              |
| designatedTotal | number             |               | total number that the value of each object in the results array will be compared to. If left undefined, the value of each object will automatically be compared to the total of all the values in the results array. |
| minWidth        | number             | 150           | minimum width of each graph in grid                                                                                                                                                                                  |

### Outputs

| Property | Description |
| -------- | ----------- |
| select   | click event |

### Data Format

The data format is single series:

```text
[
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  }
]
```
```

--------------------------------

### Polar Radar Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/polar-radar-chart.md

Configuration options for the Polar Radar Chart component, including hover behavior, custom tooltip template, and y-axis scaling.

```APIDOC
## Polar Radar Chart Inputs

### Description
These are the configurable input properties for the Polar Radar Chart component.

### Inputs

- **showSeriesOnHover** (boolean) - Optional - Default: true - Show or hide all points on the line on hover.
- **tooltipTemplate** (TemplateRef) - Optional - A custom ng-template to be displayed inside the tooltip.
- **yAxisMinScale** (number) - Optional - Force y axis scaling to the provided value (ignored if chart data contains a higher value).

```

--------------------------------

### Normalized Area Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/line-area-charts/normalized-area-chart.md

Lists the configurable input properties for the Normalized Area Chart component, including their types, default values, and descriptions.

```APIDOC
## Normalized Area Chart Inputs

### Description
This section documents the input properties that can be set on the Normalized Area Chart component to customize its appearance and behavior.

### Inputs

| Property | Type | Default Value | Description |
| --- | --- | --- | --- |
| view | number[] | | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
| results | object[] | | the chart data |
| scheme | object | | the color scheme of the chart |
| schemeType | string | 'ordinal' | the color scale type. Can be either 'ordinal' or 'linear' |
| customColors | function or object | | custom colors for the chart. Used to override a color for a specific value |
| animations | boolean | true | enable animations |
| legend | boolean | false | show or hide the legend |
| legendTitle | string | 'Legend' | the legend title |
| legendPosition | string | 'right' | the legend position ['right', 'below'] |
| xAxis | boolean | false | show or hide the x axis |
| yAxis | boolean | false | show or hide the y axis |
| showGridLines | boolean | true | show or hide the grid lines |
| roundDomains | boolean | false | round domains for aligned gridlines |
| showXAxisLabel | boolean | false | show or hide the x axis label |
| showYAxisLabel | boolean | false | show or hide the y axis label |
| xAxisLabel | string | | the x axis label text |
| yAxisLabel | string | | the y axis label text |
| trimXAxisTicks | boolean | true | trim or not ticks on the x axis |
| trimYAxisTicks | boolean | true | trim or not ticks on the Y axis |
| rotateXAxisTicks | boolean | true | enable automic rotation of x-axis ticks to prevent overlaps |
```

--------------------------------

### Number Card Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/number-card-chart.md

Configuration properties for the Number Card Chart component, including dimensions, data, colors, and formatting options.

```APIDOC
## Number Card Chart Inputs

### Description
Configuration properties for the Number Card Chart component.

### Properties
- **view** (number[]) - Optional - The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size.
- **results** (object[]) - Optional - The chart data.
- **scheme** (object) - Optional - The color scheme of the chart.
- **customColors** (function or object) - Optional - Custom colors for the chart. Used to override a color for a specific value.
- **animations** (boolean) - Optional - Enable animations. Default: true.
- **cardColor** (string) - Optional - Color of the card background, defaults to color based on value and scheme.
- **bandColor** (string) - Optional - Color of the card color-bar, defaults to color based on value and scheme.
- **textColor** (string) - Optional - Color of the card text, defaults to the inverse of the card color.
- **emptyColor** (string) - Optional - Color of empty card slots. Default: 'rgba(0, 0, 0, 0)'.
- **innerPadding** (number or number[]) - Optional - Padding around each card in px. Default: 15.
- **valueFormatting** (function) - Optional - Function that formats the card value.
- **labelFormatting** (function) - Optional - Function that formats the card label.
```

--------------------------------

### Heat Map Chart Outputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/heat-map-chart.md

Events emitted by the heat map chart component.

```APIDOC
## Heat Map Chart Outputs

### Description
Events emitted by the heat map chart component.

### Events
- **select** - Click event.
```

--------------------------------

### Grouped Horizontal Bar Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/bar-charts/grouped-horizontal-bar-chart.md

Lists the input properties for the Grouped Horizontal Bar Chart component, including their types, default values, and descriptions.

```APIDOC
## Grouped Horizontal Bar Chart Inputs

### Description
This section documents the input properties for the Grouped Horizontal Bar Chart component. These properties allow users to configure the chart's data, appearance, and behavior.

### Inputs

| Property | Type | Default Value | Description |
| --- | --- | --- | --- |
| view | number[] | | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
| results | object[] | | the chart data |
| scheme | object | | the color scheme of the chart |
| schemeType | string | 'ordinal' | the color scale type. Can be either 'ordinal' or 'linear' |
| customColors | function or object | | custom colors for the chart. Used to override a color for a specific value |
| animations | boolean | true | enable animations |
| legend | boolean | false | show or hide the legend |
| legendTitle | string | 'Legend' | the legend title |
| legendPosition | string | 'right' | the legend position ['right', 'below'] |
| xAxis | boolean | false | show or hide the x axis |
| yAxis | boolean | false | show or hide the y axis |
| showGridLines | boolean | true | show or hide the grid lines |
| roundDomains | boolean | false | round domains for aligned gridlines |
| showXAxisLabel | boolean | false | show or hide the x axis label |
| showYAxisLabel | boolean | false | show or hide the y axis label |
| xAxisLabel | string | | the x axis label text |
| yAxisLabel | string | | the y axis label text |
| showDataLabel | boolean | false | displays the value number next to the bar |
| gradient | boolean | false | fill elements with a gradient instead of a solid color |
| noBarWhenZero | boolean | true | hide bar if value is 0 and setting is true |
| trimXAxisTicks | boolean | true | trim or not ticks on the x axis |
| trimYAxisTicks | boolean | true | trim or not ticks on the Y axis |
```

--------------------------------

### Grouped Vertical Bar Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/bar-charts/grouped-vertical-bar-chart.md

Lists the input properties for the Grouped Vertical Bar Chart component, including their types, default values, and descriptions.

```APIDOC
## Grouped Vertical Bar Chart Inputs

### Description
This component renders a grouped vertical bar chart. The following inputs are available to configure the chart.

### Inputs
- **view** (number[]) - Optional - The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size.
- **results** (object[]) - Optional - The chart data.
- **scheme** (object) - Optional - The color scheme of the chart.
- **schemeType** (string) - Optional - Default: 'ordinal' - The color scale type. Can be either 'ordinal' or 'linear'.
- **customColors** (function or object) - Optional - Custom colors for the chart. Used to override a color for a specific value.
- **animations** (boolean) - Optional - Default: true - Enable animations.
- **legend** (boolean) - Optional - Default: false - Show or hide the legend.
- **legendTitle** (string) - Optional - Default: 'Legend' - The legend title.
- **legendPosition** (string) - Optional - Default: 'right' - The legend position ['right', 'below'].
- **xAxis** (boolean) - Optional - Default: false - Show or hide the x axis.
- **yAxis** (boolean) - Optional - Default: false - Show or hide the y axis.
- **showGridLines** (boolean) - Optional - Default: true - Show or hide the grid lines.
- **roundDomains** (boolean) - Optional - Default: false - Round domains for aligned gridlines.
- **showXAxisLabel** (boolean) - Optional - Default: false - Show or hide the x axis label.
- **showYAxisLabel** (boolean) - Optional - Default: false - Show or hide the y axis label.
- **xAxisLabel** (string) - Optional - The x axis label text.
- **yAxisLabel** (string) - Optional - The y axis label text.
- **trimXAxisTicks** (boolean) - Optional - Default: true - Trim or not ticks on the x axis.
- **trimYAxisTicks** (boolean) - Optional - Default: true - Trim or not ticks on the Y axis.
- **maxXAxisTickLength** (number) - Optional - Default: 16 - Max length of the ticks. If `trimXAxisTicks` is `true`, ticks over this length will be trimmed.
- **maxYAxisTickLength** (number) - Optional - Default: 16 - Max length of the ticks. If `trimYAxisTicks` is `true`, ticks over this length will be trimmed.
- **xAxisTickFormatting** (function) - Optional - The x axis tick formatting.
```

--------------------------------

### Line Chart Inputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/line-area-charts/line-chart.md

Configuration inputs for the ngx-charts line chart component. These properties control chart behavior and appearance.

```APIDOC
## Line Chart Inputs

### Description
Configuration inputs for the ngx-charts line chart component. These properties control chart behavior and appearance.

### Inputs

| Name | Type | Default | Description |
|------|------|---------|-------------|
| autoScale | boolean | false | set the minimum value of the y axis to the minimum value in the data, instead of 0 (ignored if yScaleMin is defined) |
| curve | function | | the interpolation function used to generate the curve. It accepts any [d3.curve](https://github.com/d3/d3-shape#curves) function |
| gradient | boolean | false | fill elements with a gradient instead of a solid color |
| activeEntries | object[] | [] | elements to highlight |
| tooltipDisabled | boolean | false | show or hide the tooltip |
| tooltipTemplate | TemplateRef | | a custom ng-template to be displayed inside the tooltip when hovering a single point |
| seriesTooltipTemplate | TemplateRef | | a custom ng-template to be displayed inside the tooltip when hovering series |
| referenceLines | object[] | | an array of reference lines to be shown behind the chart. Every reference line should be of format {name, value} |
| showRefLines | boolean | false | show or hide the reference lines |
| showRefLabels | boolean | true | show or hide the reference line labels |
| xScaleMin | any | | the minimum value of the x axis (if the x scale is linear or time) |
| xScaleMax | any | | the maximum value of the x axis (if the x scale is linear or time) |
| yScaleMin | number | | the minimum value of the y axis |
| yScaleMax | number | | the maximum value of the y axis |
| wrapTicks | boolean | false | axis tick labels will wrap based on available space |
```

--------------------------------

### Gauge Chart Data Format

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/gauge-chart.md

The expected data format for the Gauge Chart component.

```APIDOC
## Gauge Chart Data Format

### Description
The data format is single series.

### Data Format
```text
[
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  }
]
```
```

--------------------------------

### Number Card Chart Outputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/number-card-chart.md

Events emitted by the Number Card Chart component.

```APIDOC
## Number Card Chart Outputs

### Description
Events emitted by the Number Card Chart component.

### Events
- **select** - Click event.
```

--------------------------------

### Gauge Chart Outputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/gauge-chart.md

Events emitted by the Gauge Chart component.

```APIDOC
## Gauge Chart Outputs

### Description
These are the output events that the Gauge Chart component emits.

### Outputs
- **select** - Click event.
- **activate** - Element activation event (mouse enter).
- **deactivate** - Element deactivation event (mouse leave).
```

--------------------------------

### Pie Chart Component

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/pie-charts/pie-chart.md

The Pie Chart component is a data visualization that displays data as slices of a pie or doughnut. It supports customization through various inputs and emits events on user interaction.

```APIDOC
## Pie Chart Component

### Description
The Pie Chart component renders data as a pie or doughnut chart. It accepts a single series of data and provides options for labels, legend, tooltips, and styling.

### Inputs
- **view** (number[]) - Optional - The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size.
- **results** (object[]) - Required - The chart data.
- **scheme** (object) - Optional - The color scheme of the chart.
- **customColors** (object) - Optional - Custom colors for the chart. Used to override a color for a specific value.
- **animations** (boolean) - Default: true - Enable animations.
- **labels** (boolean) - Default: false - Show or hide the labels.
- **labelFormatting** (function) - Optional - Function that formats the label text.
- **trimLabels** (boolean) - Default: true - Trim the labels beyond a certain maximum length.
- **maxLabelLength** (number) - Default: 10 - Maximum length of the labels. If `trimLabels` is `true`, labels over this length will be trimmed.
- **legend** (boolean) - Default: true - Show or hide the legend.
- **legendTitle** (string) - Default: 'Legend' - The legend title.
- **legendPosition** (string) - Default: 'right' - The legend position ['right', 'below'].
- **explodeSlices** (boolean) - Default: false - Make the radius of each slice proportional to its value.
- **doughnut** (boolean) - Default: false - Should doughnut instead of pie slices.
- **arcWidth** (number) - Default: 0.25 - Arc width, expressed as a fraction of outer radius.
- **gradient** (boolean) - Default: false - Fill elements with a gradient instead of a solid color.
- **activeEntries** (object[]) - Default: [] - Elements to highlight.
- **tooltipDisabled** (boolean) - Default: false - Show or hide the tooltip.
- **tooltipText** (function) - Optional - A function that formats the tooltip.
- **tooltipTemplate** (TemplateRef) - Optional - A custom ng-template to be displayed inside the tooltip.

### Outputs
- **select** - Click event.
- **activate** - Element activation event (mouse enter).
- **deactivate** - Element deactivation event (mouse leave).

### Data Format
The data format is single series:

```text
[
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  }
]
```
```

--------------------------------

### Advanced Pie Chart Component

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/pie-charts/advanced-pie-chart.md

The Advanced Pie Chart component accepts inputs for view dimensions, data, color scheme, animations, and formatting functions. It emits events for selection, activation, and deactivation.

```APIDOC
## Advanced Pie Chart

### Description
The Advanced Pie Chart component renders a pie chart with configurable inputs and output events.

### Inputs

| Property | Type | Default Value | Description |
| --- | --- | --- | --- |
| view | number[] | | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
| results | object[] | | the chart data |
| scheme | object | | the color scheme of the chart |
| customColors | function or object | | custom colors for the chart. Used to override a color for a specific value |
| animations | boolean | true | enable animations |
| gradient | boolean | false | fill elements with a gradient instead of a solid color |
| activeEntries | object[] | [] | elements to highlight |
| label | string | 'Total' | the text to show under the total value |
| tooltipDisabled | boolean | false | show or hide the tooltip |
| tooltipTemplate | TemplateRef | | a custom ng-template to be displayed inside the tooltip |
| valueFormatting | function | | function that formats the numerical value in the chart legend |
| nameFormatting | function | | function that formats name in the chart legend |
| percentageFormatting | function | | function that formats the percentage number in the chart legend |

### Outputs

| Property | Description |
| --- | --- |
| select | click event |
| activate | element activation event (mouse enter) |
| deactivate | element deactivation event (mouse leave) |

### Data Format

The data format is single series:

```text
[
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  }
]
```
```

--------------------------------

### Heat Map Chart Data Format

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/heat-map-chart.md

The expected multi-series data structure for the heat map chart.

```APIDOC
## Heat Map Chart Data Format

### Description
The data format is multi series.

### Example
```text
[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      }
    ]
  },
  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000
      },
      {
        "name": "2011",
        "value": 8270000
      }
    ]
  }
]
```
```

--------------------------------

### Polar Radar Chart Outputs

Source: https://github.com/swimlane/ngx-charts/blob/master/docs/examples/polar-radar-chart.md

Events emitted by the Polar Radar Chart component for user interactions.

```APIDOC
## Polar Radar Chart Outputs

### Description
Events emitted by the Polar Radar Chart component.

### Outputs

- **select** - Click event.
- **activate** - Element activation event (mouse enter).
- **deactivate** - Element deactivation event (mouse leave).

```
Tokens:
Raw