### Install Project Dependencies

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

Installs all necessary dependencies for the project. Run this before starting the development server.

```bash
npm i
```

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

### Start Development Server

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

Starts the local development server to run the demos. Browse to http://localhost:9999 to view the demos.

```bash
npm start
```

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

### Install ngx-charts via npm

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

Use this command to install the ngx-charts library in your Angular project.

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

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

### Link to ngx-charts Documentation

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Provides a direct link to the official ngx-charts documentation for further details and examples.

```html
[Documentation](https://swimlane.gitbooks.io/ngx-charts/content/)
```

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

### Setting Start Angle for Pie/Doughnut Charts

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the starting angle for segments in pie or doughnut charts.

```html
Start Angle:
```

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

### Displaying Sale Price and Personnel Cost

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Demonstrates how to display dynamic price and cost values using interpolation in an HTML template.

```html
Price: ${{ salePrice }}
Cost: ${{ personnelCost }} / hr
```

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

### Displaying Item Name and Value

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Shows how to iterate and display item names and values, often used in lists or summaries.

```html
{{ item.name }} ({{ item.value }}) /
```

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

### Line Chart Configuration

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

Configure the appearance and behavior of the Line Chart using its input properties.

```APIDOC
## Line Chart Inputs

This section details the configurable inputs for the Line Chart component.

### 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.
```

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

### Displaying ngx-charts Version

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Shows the application version for the ngx-charts framework.

```html
Ngx-**Charts** {{ APP_VERSION }} Angular Chart Framework
```

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

### Toggling Theme

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Provides options to switch between 'Dark' and 'Light' themes for the charts.

```html
> Dark Light
```

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

### Navigating Back

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

A simple navigation link, likely used for returning to a previous view or section.

```html
{{ getBubbleInteractiveTitle() }} Go Back
```

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

### Displaying Flag and Model Information

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Combines displaying an image (flag) with textual information about a model's name and value.

```html
{{ getFlag(model.name) }}
=========================

{{ model.name }}: {{ model.value }}
-----------------------------------
```

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

### Release Process for ngx-charts

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

Follow these steps to release a new version of ngx-charts. This includes updating the version number, changelog, packaging, and publishing.

```bash
git checkout master
git pull
yarn install --frozen-lockfile
yarn test
git checkout -b release/X.Y.Z
yarn package
git commit -am "(release): X.Y.Z"
git tag X.Y.Z
git push origin HEAD --tags
yarn publish:lib
```

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

### Applying Dimensions

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Applies specified width and height dimensions to a container, likely for chart resizing.

```html
Apply dimensions
```

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

### Selecting Color Scheme

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Allows selection of a color scheme by name and type (Ordinal or Linear).

```html
{{ scheme.name }} Ordinal Linear
```

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

### Setting Margin Values

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input fields to set the top, right, bottom, and left margin values for the chart.

```html
Top:
Right:
Bottom:
Left:
```

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

### Timeline Chart Option

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Enables or configures options specific to timeline charts.

```html
Timeline
```

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

### Doughnut Chart Option

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Enables or configures options specific to doughnut charts.

```html
Doughnut
```

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

### Displaying Temporary Bubble Demo Data

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a temporary JavaScript object as a JSON string, used for demonstrating bubble chart features.

```html
{{ bubbleDemoTempData | json }}
```

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

### Displaying Chart Name

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Displays the name of the current chart being used.

```html
{{ chart.name }}
```

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

### Setting Units for Gauge/Meter

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to specify the units displayed on a gauge or meter chart.

```html
Units:
```

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

### Stacked Area Chart Inputs

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

Configuration options for the Stacked Area Chart component.

```APIDOC
## Stacked Area Chart Inputs

### Description

This section details the various input properties available for customizing the Stacked Area Chart component.

### Inputs

- **maxXAxisTickLength** (number) - Optional - Max length of the x-axis ticks. If `trimXAxisTicks` is `true`, ticks over this length will be trimmed. Default: 16.
- **maxYAxisTickLength** (number) - Optional - Max length of the y-axis ticks. If `trimYAxisTicks` is `true`, ticks over this length will be trimmed. Default: 16.
- **xAxisTickFormatting** (function) - Optional - The x-axis tick formatting function.
- **yAxisTickFormatting** (function) - Optional - The y-axis tick formatting function.
- **xAxisTicks** (any[]) - Optional - Predefined list of x-axis tick values.
- **yAxisTicks** (any[]) - Optional - Predefined list of y-axis tick values.
- **timeline** (boolean) - Optional - Display a timeline control under the chart. Only available if the x scale is a date. Default: false.
- **autoScale** (boolean) - Optional - Set the minimum value of the y-axis to the minimum value in the data, instead of 0. Ignored if `yScaleMin` is defined. Default: false.
- **curve** (function) - Optional - The interpolation function used to generate the curve. It accepts any [d3.curve](https://github.com/d3/d3-shape#curves) function.
- **gradient** (boolean) - Optional - Fill elements with a gradient instead of a solid color. Default: false.
- **activeEntries** (object[]) - Optional - Elements to highlight. Default: [].
- **tooltipDisabled** (boolean) - Optional - Show or hide the tooltip. Default: false.
- **tooltipTemplate** (TemplateRef) - Optional - A custom ng-template to be displayed inside the tooltip when hovering a single point.
- **seriesTooltipTemplate** (TemplateRef) - Optional - A custom ng-template to be displayed inside the tooltip when hovering a series.
- **xScaleMin** (any) - Optional - The minimum value of the x-axis (if the x scale is linear or time).
- **xScaleMax** (any) - Optional - The maximum value of the x-axis (if the x scale is linear or time).
- **yScaleMin** (number) - Optional - The minimum value of the y-axis.
- **yScaleMax** (number) - Optional - The maximum value of the y-axis.
- **wrapTicks** (boolean) - Optional - Axis tick labels will wrap based on available space. Default: false.
```

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

### Setting Range Fill Opacity

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the opacity for range fill colors, ranging from 0.0 to 1.0.

```html
Range fill color opacity (0.0 - 1.0):
```

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

### Setting Number of Small Segments

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to specify the number of small segments, likely for gauge or meter charts.

```html
Number of small segments:
```

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

### Setting Target Value for Gauge/Meter

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the target value for a gauge or meter chart.

```html
Target:
```

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

### Displaying Date Data with Range

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, likely containing date information with a specified range.

```html
{{ dateDataWithRange | json }}
```

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

### Linear Gauge Component Inputs

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

Configuration options for the Linear Gauge component, including dimensions, color schemes, value ranges, and formatting.

```APIDOC
## Linear Gauge Component

### Description

This component renders a linear gauge chart.

### Inputs

- **view** (number[]) - Optional - The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size.
- **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.
- **min** (number) - Optional - Starting point of the scale. Default: 0.
- **max** (number) - Optional - Ending point of the scale. Default: 100.
- **value** (number) - Optional - The value represented on the gauge. Default: 0.
- **previousValue** (number) - Optional - The value represented by the vertical line on the gauge. Use this if you want to compare the current value to a previous one.
- **units** (string) - Optional - Text to display under the value.
- **valueFormatting** (function) - Optional - Function that formats the value in the middle of the chart.

### Outputs

- **select** - click event
```

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

### Displaying Date Data

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, likely containing date-related information.

```html
{{ dateData | json }}
```

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

### Displaying Bar Chart Data

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, formatted for bar chart visualization.

```html
{{ barChart | json }}
```

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

### Displaying JSON Data (Multi)

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, typically for debugging or displaying raw data.

```html
{{ multi | json }}
```

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

### Displaying Bubble Chart Data

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, formatted for bubble chart visualization.

```html
{{ bubble | json }}
```

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

### Setting Stroke Width

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to define the stroke width for chart elements.

```html
Stroke Width:
```

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

### Displaying Fiscal Year Report Data

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, likely representing fiscal year report data.

```html
{{ fiscalYearReport | json }}
```

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

### Displaying Line Chart Series Data

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, formatted for line chart series data.

```html
{{ lineChartSeries | json }}
```

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

### Displaying JSON Data (Single)

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, typically for debugging or displaying raw data.

```html
{{ single | json }}
```

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

### Setting Minimum X-Scale Value

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the minimum value for the X-axis scale.

```html
Minimum X-Scale value
```

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

### Setting Padding Between Groups

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the padding between groups of bars in a bar chart.

```html
Padding between groups:
```

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

### Normalized Area Chart Inputs

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

This section details the available inputs for the Normalized Area Chart component, covering axis configurations, tooltip customization, and visual enhancements.

```APIDOC
## Inputs

| Name | Type | Default | Description |
|---|---|---|---|
| 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 |  | 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 |
| timeline | boolean | false | display a timeline control under the chart. Only available if x scale is date |
| autoScale | boolean | false | set the minimum value of the y axis to the minimum value in the data, instead of 0 |
| 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 |
| wrapTicks | boolean | false | axis tick labels will wrap based on available space
```

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

### Exploding Doughnut Slices

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to enable or disable the 'explode' effect for doughnut chart slices.

```html
Explode Slices
```

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

### Line Chart Data Format with Range

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

This format extends the regular line chart data by including 'min' and 'max' values for each data point. This is useful for displaying error margins, data distribution, or cumulated data where the central line represents the average.

```json
[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000,
        "min": 7000000,
        "max": 7600000
      },
      {
        "name": "2011",
        "value": 8940000,
        "min": 8840000,
        "max": 9300000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000,
        "min": 7800000,
        "max": 7950000
      },
      {
        "name": "2011",
        "value": 8270000,
        "min": 8170000,
        "max": 8300000
      }
    ]
  }
]
```

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

### Setting Arc Width for Doughnut Chart

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the width of the arc in a doughnut chart as a fraction of the radius.

```html
Arc width (fraction of radius):
```

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

### Setting X Axis Label

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the custom label for the X-axis.

```html
X Axis Label:
```

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

### Toggling Animation Option

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to enable or disable animations for chart transitions.

```html
Animations
```

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

### Setting Padding Between Bars

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the padding between individual bars in a bar chart.

```html
Padding between bars:
```

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

### Setting Line Interpolation Type

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Dropdown to select the interpolation type for line charts.

```html
Line Interpolation {{ interpolationType }}
```

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

### Auto Scaling Option

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to enable or disable auto-scaling for chart elements.

```html
Auto Scale
```

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

### Toggling Reference Lines Visibility

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to control the visibility of reference lines on the chart.

```html
Show Reference Lines
```

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

### Setting Legend Title

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the title for the chart legend.

```html
Legend Title:
```

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

### Setting Angle Span for Pie/Doughnut Charts

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the angle span for segments in pie or doughnut charts.

```html
Angle span:
```

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

### Setting Number of Large Segments

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to specify the number of large segments, likely for gauge or meter charts.

```html
Number of large segments:
```

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

### Gauge Chart Data Format

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

The Gauge Chart expects data in a single series format. Each data point should have a 'name' and a 'value'.

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

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

### Toggling Reference Labels Visibility

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to control the visibility of reference labels on the chart.

```html
Show Reference Labels
```

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

### Setting Minimum Radius

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to define the minimum radius for chart elements, often used in radial charts.

```html
Minimum Radius:
```

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

### Setting Maximum X-Scale Value

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the maximum value for the X-axis scale.

```html
Maximum X-Scale value
```

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

### Pie Chart Component

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

The Pie Chart component visualizes data in a circular graph. It accepts various inputs to customize its appearance and behavior.

```APIDOC
## Pie Chart Component

### Description
This component renders a pie chart based on the provided data. It supports various configurations for customization.

### 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 | object |  | Custom colors for the chart. Used to override a color for a specific value. |
| animations | boolean | true | Enable animations. |
| labels | boolean | false | Show or hide the labels. |
| labelFormatting | function |  | Function that formats the label text. |
| trimLabels | boolean | true | Trim the labels beyond a certain maximum length. |
| maxLabelLength | number | 10 | Maximum length of the labels. If `trimLabels` is `true`, labels over this length will be trimmed. |
| legend | boolean | true | Show or hide the legend. |
| legendTitle | string | 'Legend' | The legend title. |
| legendPosition | string | 'right' | The legend position ['right', 'below']. |
| explodeSlices | boolean | false | Make the radius of each slice proportional to its value. |
| doughnut | boolean | false | Should doughnut instead of pie slices. |
| arcWidth | number | 0.25 | Arc width, expressed as a fraction of outer radius. |
| 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. |
| tooltipText | function |  | A function that formats the tooltip. |
| tooltipTemplate | TemplateRef |  | A custom ng-template to be displayed inside the tooltip. |

### 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
  }
]
```
```

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

### Gauge Chart Component

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

The Gauge Chart component displays data in a gauge format. It accepts various inputs for customization and emits events on user interaction.

```APIDOC
## Gauge Chart Component

### Description
Displays data in a gauge format. It accepts various inputs for customization and emits events on user interaction.

### 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** (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.

### Outputs

- **select**: click event
- **activate**: element activation event (mouse enter)
- **deactivate**: element deactivation event (mouse leave)

### Data Format

The data format is single series:

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

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

### Toggling Domain Rounding

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to enable or disable rounding of chart domains.

```html
Round Domains
```

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

### Setting Chart Value

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set a specific value for a chart element.

```html
Value:
```

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

### Toggling Labels Visibility

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to control the general visibility of labels within the chart.

```html
Show Labels
```

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

### Setting Minimum Y-Scale Value

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the minimum value for the Y-axis scale.

```html
Minimum Y-Scale value
```

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

### Toggling Grid Lines Visibility

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to control the visibility of grid lines on the chart.

```html
Show Grid Lines
```

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

### Displaying Timeline Filter Bar Data

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, formatted for timeline filter bar data.

```html
{{ timelineFilterBarData | json }}
```

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

### Toggling Gradient Usage

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to enable or disable the use of gradients in chart elements.

```html
Use Gradients
```

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

### Toggling Margin Visibility

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to control the visibility of margins around the chart.

```html
Show Margin
```

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

### Setting Inner Padding for Chart

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the inner padding value for charts.

```html
Inner padding value:
```

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

### Bubble Chart Data Format

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

This is the multi-series data format required for bubble charts. Each object in the main array represents a series, containing a 'name' and a 'series' array. The 'series' array contains objects with 'name', 'x', 'y', and 'r' properties, defining the data points.

```json
[
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "x": 40632,
        "y": 80.3,
        "r": 80.4
      },
      {
        "name": "2000",
        "x": 36953,
        "y": 80.3,
        "r": 78
      },
      {
        "name": "1990",
        "x": 31476,
        "y": 75.4,
        "r": 79
      }
    ]
  },
  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "x": 49737,
        "y": 78.8,
        "r": 310
      },
      {
        "name": "2000",
        "x": 45986,
        "y": 76.9,
        "r": 283
      },
      {
        "name": "1990",
        "x": 3706,
        "y": 75.4,
        "r": 253
      }
    ]
  },
  {
    "name": "France",
    "series": [
      {
        "name": "2010",
        "x": 36745,
        "y": 81.4,
        "r": 63
      },
      {
        "name": "2000",
        "x": 34774,
        "y": 79.1,
        "r": 59.4
      },
      {
        "name": "1990",
        "x": 29476,
        "y": 77.2,
        "r": 56.9
      }
    ]
  },
  {
    "name": "United Kingdom",
    "series": [
      {
        "name": "2010",
        "x": 36240,
        "y": 80.2,
        "r": 62.7
      },
      {
        "name": "2000",
        "x": 32543,
        "y": 77.8,
        "r": 58.9
      },
      {
        "name": "1990",
        "x": 26424,
        "y": 75.7,
        "r": 57.1
      }
    ]
  }
]
```

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

### Number Card Chart Component

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

The Number Card Chart component displays key metrics as individual cards. It accepts various inputs to customize its appearance and behavior, and emits a select event when a card is clicked.

```APIDOC
## Number Card Chart Component

### Description

Displays key metrics as individual cards. It accepts various inputs to customize its appearance and behavior, and emits a select event when a card is clicked.

### 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. Defaults to 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. Defaults to 'rgba(0, 0, 0, 0)'.
- **innerPadding** (number | number[]) - Optional - Padding around each card in px. Defaults to 15.
- **valueFormatting** (function) - Optional - Function that formats the card value.
- **labelFormatting** (function) - Optional - Function that formats the card label.

### Outputs

- **select** - Click event.

### Data Format

The data format is single series:

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

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

### Setting Maximum Radius

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to define the maximum radius for chart elements, often used in radial charts.

```html
Maximum Radius:
```

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

### Box Chart Data Format

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

The data for a box chart should be in a single series format, with each data point having a 'name' and a 'value'.

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

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

### Toggling Label Visibility for Margins

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Checkbox to control the visibility of labels associated with chart margins.

```html
Show Label
```

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

### Displaying Box Plot Data

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Renders a JavaScript object as a JSON string, specifically formatted for box plot visualization.

```html
{{ boxData | json }}
```

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

### Setting Previous Chart Value

Source: https://github.com/swimlane/ngx-charts/blob/master/src/app/app.component.html

Input field to set the previous value for a chart element, often used in comparisons or animations.

```html
Previous value:
```