### Pie Chart Configuration

Source: https://www.chartjs.org/docs/latest/charts/doughnut.html

Example configuration for creating a Pie chart.

```APIDOC
## Pie Chart Setup

### Description
Configuration for a Pie chart.

### Method
```javascript
const config = {
  type: 'pie',
  data: data,
};
```

### Request Example
```json
{
  "type": "pie",
  "data": "data"
}
```
```

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

### Label Callback Example

Source: https://www.chartjs.org/docs/latest/configuration/tooltip.html

Example of using the `label` callback to format the displayed text for each data point, such as adding a currency symbol.

```APIDOC
## Label Callback

The `label` callback can change the text that displays for a given data point. A common example to show a unit. The example below puts a `'$'` before every row.
```javascript
const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let label = context.dataset.label || '';

                        if (label) {
                            label += ': ';
                        }
                        if (context.parsed.y !== null) {
                            label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
                        }
                        return label;
                    }
                }
            }
        }
    }
});
```
```

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

### Doughnut Chart Configuration

Source: https://www.chartjs.org/docs/latest/charts/doughnut.html

Example configuration for creating a Doughnut chart.

```APIDOC
## Doughnut Chart Setup

### Description
Configuration for a Doughnut chart.

### Method
```javascript
const config = {
  type: 'doughnut',
  data: data,
};
```

### Request Example
```json
{
  "type": "doughnut",
  "data": "data"
}
```
```

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

### Run Development Server with Spec Filtering

Source: https://www.chartjs.org/docs/latest/developers/contributing.html

Starts the development server in watch mode, with an option to filter tests by matching a string against spec filenames. For example, running `pnpm run dev plugins` will only watch for changes in files related to plugins.

```bash
> pnpm run dev plugins
```

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

### Import Chart.js with Bundlers (Quick Start)

Source: https://www.chartjs.org/docs/latest/getting-started/integration.html

This snippet shows the quick start method for integrating Chart.js with bundlers like Webpack or Rollup. It imports the 'auto' package, which includes all features, making it easy to use but potentially increasing bundle size.

```javascript
import Chart from 'chart.js/auto';
```

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

### Chart.js Bar Chart Dataset Styling Example

Source: https://www.chartjs.org/docs/latest/charts/bar.html

Provides an example of configuring specific dataset properties for a bar chart, such as barPercentage, barThickness, maxBarThickness, minBarLength, and the data values.

```javascript
data: {
    datasets: [{
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};
```

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

### Min/Max Configuration Example

Source: https://www.chartjs.org/docs/latest/axes/cartesian/category

Demonstrates how to set minimum and maximum values for an axis using string labels or numeric indices.

```APIDOC
## Min Max Configuration
For both the `min` and `max` properties, the value must be `string` in the `labels` array or `numeric` value as an index of a label in that array. In the example below, the x axis would only display "March" through "June".
```javascript
let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [10, 20, 30, 40, 50, 60]
        }],
        labels: ['January', 'February', 'March', 'April', 'May', 'June']
    },
    options: {
        scales: {
            x: {
                min: 'March'
            }
        }
    }
});
```
```

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

### Step Size Configuration

Source: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

Example of configuring the `stepSize` option to control the interval between ticks.

```APIDOC
## Step Size
If set, the scale ticks will be enumerated by multiple of `stepSize`, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.

This example sets up a chart with a y-axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.

```javascript
let options = {
    scales: {
        y: {
            max: 5,
            min: 0,
            ticks: {
                stepSize: 0.5
            }
        }
    }
};
```
```

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

### Install Development Dependencies with pnpm

Source: https://www.chartjs.org/docs/latest/developers/contributing.html

Installs the necessary development dependencies for Chart.js using the pnpm package manager. This command should be run after cloning the repository and navigating to its root directory.

```bash
> pnpm install
```

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

### Data Structure Example

Source: https://www.chartjs.org/docs/latest/samples/subtitle/basic.html

This snippet provides an example of the data structure required for a Chart.js line chart, including labels and dataset configuration.

```APIDOC
## Data Structure Example

### Description
This example illustrates the structure of the `data` object required for a Chart.js line chart. It defines the labels for the x-axis and configures a dataset with sample data, line styling, and color properties.

### Method
N/A (Client-side JavaScript data preparation)

### Endpoint
N/A (Client-side JavaScript data preparation)

### Parameters
N/A (Data object properties)

### Request Example
```javascript
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
const data = {
  labels: Utils.months({count: DATA_COUNT}),
  datasets: [
    {
      label: 'Dataset 1',
      data: Utils.numbers(NUMBER_CFG),
      fill: false,
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
    },
  ]
};
```

### Response
N/A (This is a client-side data preparation example)

### Response Example
N/A
```

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

### Example Usage: Basic Title

Source: https://www.chartjs.org/docs/latest/configuration/title.html

Demonstrates how to enable and set a simple text title for a Chart.js chart.

```APIDOC
## Example Usage: Basic Title

### Description

This example shows how to enable a title of 'Custom Chart Title' on the chart.

### Method

Configuration within `options.plugins.title`

### Request Example

```javascript
const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title'
            }
        }
    }
});
```
```

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

### Install Chart.js via npm

Source: https://www.chartjs.org/docs/latest/getting-started/installation

This command installs the Chart.js library using npm, the Node Package Manager. It is the recommended way to include Chart.js in your project for easy dependency management and updates.

```bash
npm install chart.js
```

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

### Example Usage: Custom Padding

Source: https://www.chartjs.org/docs/latest/configuration/title.html

Illustrates how to configure custom top and bottom padding for the chart title.

```APIDOC
## Example Usage: Custom Padding

### Description

This example shows how to specify separate top and bottom title text padding.

### Method

Configuration within `options.plugins.title`

### Request Example

```javascript
const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title',
                padding: {
                    top: 10,
                    bottom: 30
                }
            }
        }
    }
});
```
```

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

### Configure Dataset Options in Chart.js

Source: https://www.chartjs.org/docs/latest/api/interfaces/ControllerDatasetOptions.html

Example demonstrating how to apply various dataset options such as label, hidden state, and indexAxis within a Chart.js configuration object.

```javascript
const config = {
  type: 'bar',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [10, 20, 30],
      hidden: false,
      indexAxis: 'x',
      order: 1,
      stack: 'stack1'
    }]
  },
  options: {
    parsing: true,
    normalized: true,
    clip: 5
  }
};
```

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

### Basic Chart Configuration

Source: https://www.chartjs.org/docs/latest/samples/subtitle/basic.html

This snippet shows the basic configuration for a line chart, including the setup for displaying a chart title and a subtitle with custom styling.

```APIDOC
## Basic Chart Configuration

### Description
This example demonstrates the basic setup for a line chart using Chart.js. It includes the configuration for displaying both a main chart title and a subtitle, with options to customize the subtitle's appearance, such as color, font properties, and padding.

### Method
N/A (Client-side JavaScript configuration)

### Endpoint
N/A (Client-side JavaScript configuration)

### Parameters
N/A (Configuration object properties)

### Request Example
```javascript
const config = {
  type: 'line',
  data: data,
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Chart Title',
      },
      subtitle: {
        display: true,
        text: 'Chart Subtitle',
        color: 'blue',
        font: {
          size: 12,
          family: 'tahoma',
          weight: 'normal',
          style: 'italic'
        },
        padding: {
          bottom: 10
        }
      }
    }
  }
};
```

### Response
N/A (This is a client-side configuration example)

### Response Example
N/A
```

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

### Chart.js Build and Development Commands

Source: https://www.chartjs.org/docs/latest/developers/contributing.html

Provides common commands for building, testing, and linting the Chart.js project. These commands are available from the repository root after installing dependencies.

```bash
> pnpm run build
> pnpm run autobuild
> pnpm run dev
> pnpm run lint
> pnpm test
```

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

### Initialize Chart with Time Scale (JavaScript)

Source: https://www.chartjs.org/docs/latest/axes/cartesian/time.html

Initializes a Chart.js line chart with a time scale on the x-axis. This is the starting configuration before any scale type changes.

```javascript
const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time'
            }
        }
    }
});
```

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

### Scale and Element Utility Methods

Source: https://www.chartjs.org/docs/latest/api/interfaces/RadialLinearScale.html

This section details utility methods for scales and elements, such as getting pixel values, point positions, and user bounds.

```APIDOC
## GET /websites/chartjs/getPixelForValue

### Description
Returns the location of the given data point. Value can either be an index or a numerical value. The coordinate (0, 0) is at the upper-left corner of the canvas.

### Method
GET

### Endpoint
/websites/chartjs/getPixelForValue

### Parameters
#### Query Parameters
- **value** (number) - Required - The data point value or index.
- **index** (number) - Optional - The index of the data point.

### Response
#### Success Response (200)
- **pixelLocation** (number) - The calculated pixel location on the canvas.
```

```APIDOC
## GET /websites/chartjs/getPointLabelPosition

### Description
Retrieves the position of a point label based on its index.

### Method
GET

### Endpoint
/websites/chartjs/getPointLabelPosition

### Parameters
#### Query Parameters
- **index** (number) - Required - The index of the point label.

### Response
#### Success Response (200)
- **ChartArea** (object) - An object containing the x, y, width, and height of the point label's area.
```

```APIDOC
## GET /websites/chartjs/getPointPosition

### Description
Calculates the position of a point based on its index and distance from the center.

### Method
GET

### Endpoint
/websites/chartjs/getPointPosition

### Parameters
#### Query Parameters
- **index** (number) - Required - The index of the point.
- **distanceFromCenter** (number) - Required - The distance of the point from the center.

### Response
#### Success Response (200)
- **position** (object) - An object containing the angle, x, and y coordinates of the point.
```

```APIDOC
## GET /websites/chartjs/getPointPositionForValue

### Description
Calculates the position of a point for a given index and value.

### Method
GET

### Endpoint
/websites/chartjs/getPointPositionForValue

### Parameters
#### Query Parameters
- **index** (number) - Required - The index of the point.
- **value** (number) - Required - The value associated with the point.

### Response
#### Success Response (200)
- **position** (object) - An object containing the angle, x, and y coordinates of the point.
```

```APIDOC
## GET /websites/chartjs/getProps

### Description
Gets the current or final value of specified properties. Can return extra properties.

### Method
GET

### Endpoint
/websites/chartjs/getProps

### Parameters
#### Query Parameters
- **props** (string[]) - Required - An array of property names to retrieve.
- **final** (boolean) - Optional - If true, retrieves the final value (animation target).

### Response
#### Success Response (200)
- **properties** (object) - An object containing the requested properties and their values.
```

```APIDOC
## GET /websites/chartjs/getTicks

### Description
Retrieves the ticks for the scale.

### Method
GET

### Endpoint
/websites/chartjs/getTicks

### Response
#### Success Response (200)
- **ticks** (array) - An array of tick objects.
```

```APIDOC
## GET /websites/chartjs/getUserBounds

### Description
Retrieves the user-defined bounds for the scale.

### Method
GET

### Endpoint
/websites/chartjs/getUserBounds

### Response
#### Success Response (200)
- **bounds** (object) - An object containing min, max, minDefined, and maxDefined properties.
```

```APIDOC
## GET /websites/chartjs/getValueForDistanceFromCenter

### Description
Calculates the data value corresponding to a given distance from the center.

### Method
GET

### Endpoint
/websites/chartjs/getValueForDistanceFromCenter

### Parameters
#### Query Parameters
- **distance** (number) - Required - The distance from the center.

### Response
#### Success Response (200)
- **value** (number) - The calculated data value.
```

```APIDOC
## GET /websites/chartjs/getValueForPixel

### Description
Used to get the data value from a given pixel. This is the inverse of getPixelForValue. The coordinate (0, 0) is at the upper-left corner of the canvas.

### Method
GET

### Endpoint
/websites/chartjs/getValueForPixel

### Parameters
#### Query Parameters
- **pixel** (number) - Required - The pixel coordinate.

### Response
#### Success Response (200)
- **value** (number) - The calculated data value.
```

```APIDOC
## GET /websites/chartjs/hasValue

### Description
Checks if the scale or element has a value.

### Method
GET

### Endpoint
/websites/chartjs/hasValue

### Response
#### Success Response (200)
- **hasValue** (boolean) - True if a value exists, false otherwise.
```

```APIDOC
## POST /websites/chartjs/init

### Description
Initializes the scale or element with given options.

### Method
POST

### Endpoint
/websites/chartjs/init

### Parameters
#### Request Body
- **options** (object) - Required - The options to initialize with.

### Response
#### Success Response (200)
- **status** (string) - Indicates successful initialization.
```

```APIDOC
## GET /websites/chartjs/isFullSize

### Description
Checks if the scale or element is full size.

### Method
GET

### Endpoint
/websites/chartjs/isFullSize

### Response
#### Success Response (200)
- **isFullSize** (boolean) - True if the element is full size, false otherwise.
```

```APIDOC
## GET /websites/chartjs/isHorizontal

### Description
Returns true if the layout item is horizontal (i.e., top or bottom).

### Method
GET

### Endpoint
/websites/chartjs/isHorizontal

### Response
#### Success Response (200)
- **isHorizontal** (boolean) - True if the item is horizontal, false otherwise.
```

```APIDOC
## POST /websites/chartjs/parse

### Description
Parses a raw value into a usable format.

### Method
POST

### Endpoint
/websites/chartjs/parse

### Parameters
#### Request Body
- **raw** (unknown) - Required - The raw value to parse.
- **index** (number) - Optional - The index associated with the raw value.

### Response
#### Success Response (200)
- **parsedValue** (unknown) - The parsed value.
```

```APIDOC
## POST /websites/chartjs/setCenterPoint

### Description
Sets the center point and dimensions for an element.

### Method
POST

### Endpoint
/websites/chartjs/setCenterPoint

### Parameters
#### Request Body
- **leftMovement** (number) - Required - The left movement value.
- **rightMovement** (number) - Required - The right movement value.
- **topMovement** (number) - Required - The top movement value.
- **bottomMovement** (number) - Required - The bottom movement value.

### Response
#### Success Response (200)
- **status** (string) - Indicates successful setting of the center point.
```

```APIDOC
## POST /websites/chartjs/setDimensions

### Description
Sets the dimensions for an element.

### Method
POST

### Endpoint
/websites/chartjs/setDimensions

### Response
#### Success Response (200)
- **status** (string) - Indicates successful setting of dimensions.
```

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

### Get Base Pixel

Source: https://www.chartjs.org/docs/latest/api/interfaces/TimeScale.html

Returns the pixel coordinate corresponding to the minimum value of the scale. Useful for drawing bars or areas starting from the baseline.

```typescript
getBasePixel(): number;
```

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

### Run Documentation Server Locally

Source: https://www.chartjs.org/docs/latest/developers/contributing.html

Starts the local development server for Vuepress, which is used to manage and display the project's documentation. This allows developers to preview documentation changes in real-time.

```bash
> pnpm run docs:dev
```

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

### Data Structure for Floating Bars

Source: https://www.chartjs.org/docs/latest/samples/bar/floating.html

Example of how to structure the data for a floating bar chart in Chart.js, using an array of pairs `[start, end]` for each bar.

```APIDOC
## Data Structure for Floating Bars

### Description
This section shows how to define the data for a floating bar chart. Each dataset's `data` property should be an array where each element is a two-number array `[start, end]`, representing the beginning and ending values of the bar.

### Method
N/A (Data structure definition)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```javascript
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.red,
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.blue,
    },
  ]
};
```

### Response
N/A
```

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

### Include Chart.js with Script Tag

Source: https://www.chartjs.org/docs/latest/getting-started/integration.html

This method demonstrates how to include Chart.js using a standard script tag in HTML. It's the simplest way to get started, suitable for basic web pages. Ensure the `chart.umd.min.js` file is correctly path-ed.

```html
<script src="path/to/chartjs/dist/chart.umd.min.js"></script>
<script>
    const myChart = new Chart(ctx, {...});
</script>
```

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

### BasePlatform Constructor

Source: https://www.chartjs.org/docs/latest/api/classes/BasePlatform.html

Details on how to instantiate the BasePlatform class.

```APIDOC
## Constructors

### constructor

• **new BasePlatform**()

Instantiates a new BasePlatform object.
```

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

### Initialize Chart Data and Actions

Source: https://www.chartjs.org/docs/latest/samples/advanced/radial-gradient.html

Sets up the data structure and interaction handlers for the chart, including a randomization action.

```javascript
const DATA_COUNT = 5;
Utils.srand(110);
const chartColors = Utils.CHART_COLORS;
const colors = [chartColors.red, chartColors.orange, chartColors.yellow, chartColors.green, chartColors.blue];
const cache = new Map();
let width = null;
let height = null;
const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = generateData();
      });
      chart.update();
    }
  },
];
```

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

### Get Labels (TypeScript)

Source: https://www.chartjs.org/docs/latest/api/classes/Scale.html

Returns an array of all labels used in the chart. This is a straightforward way to get a list of all category or data point labels.

```typescript
getLabels(): string[];
```

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

### Initialize Options (TypeScript)

Source: https://www.chartjs.org/docs/latest/api/classes/Scale.html

Initializes the component with provided options. This function returns void and is used for setting up components.

```typescript
init<O>(options: O): void;
```

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

### Point Styling Configuration

Source: https://www.chartjs.org/docs/latest/samples/line/point-styling.html

Demonstrates how to set up a Chart.js line chart with customizable point styles.

```APIDOC
## Chart.js Point Styling Configuration

### Description
This section shows how to configure a line chart in Chart.js, focusing on the `pointStyle` option to customize the appearance of data points.

### Method
N/A (Configuration Object)

### Endpoint
N/A (Client-side configuration)

### Parameters
#### Request Body (Configuration Object)
- **type** (string) - Required - The type of chart, e.g., 'line'.
- **data** (object) - Required - The data object for the chart.
  - **labels** (array) - Array of labels for the x-axis.
  - **datasets** (array) - Array of dataset objects.
    - **label** (string) - Label for the dataset.
    - **data** (array) - Array of data points.
    - **borderColor** (string) - Color of the dataset line.
    - **backgroundColor** (string) - Background color for the dataset.
    - **pointStyle** (string) - The style of the points. Accepts values like 'circle', 'cross', 'rect', 'star', etc., or `false` to hide points. Defaults to 'circle'.
    - **pointRadius** (number) - Radius of the points.
    - **pointHoverRadius** (number) - Radius of the points when hovered.
- **options** (object) - Configuration options for the chart.
  - **responsive** (boolean) - Whether the chart should be responsive.
  - **plugins** (object) - Plugin configuration.
    - **title** (object) - Chart title configuration.
      - **display** (boolean) - Whether to display the title.
      - **text** (function|string) - The text or a function to generate the title text.

### Request Example
```javascript
const data = {
  labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
  datasets: [
    {
      label: 'Dataset',
      data: Utils.numbers({count: 6, min: -100, max: 100}),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      pointStyle: 'circle',
      pointRadius: 10,
      pointHoverRadius: 15
    }
  ]
};

const config = {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: (ctx) => 'Point Style: ' + ctx.chart.data.datasets[0].pointStyle,
      }
    }
  }
};
```

### Response
N/A (Client-side rendering)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Set Global Line Chart Options (JavaScript)

Source: https://www.chartjs.org/docs/latest/charts/line.html

Demonstrates how to set global configuration options for all line charts created after the change. This example sets the `spanGaps` option to true for all line charts.

```javascript
Chart.overrides.line.spanGaps = true;
```

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

### Chart.js Custom Legend Click Handler Example

Source: https://www.chartjs.org/docs/latest/configuration/legend.html

Provides an example of a custom legend click handler that links the visibility of the first two datasets. It uses the default handler for other datasets and chart types.

```javascript
const defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
const pieDoughnutLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
const newLegendClickHandler = function (e, legendItem, legend) {
    const index = legendItem.datasetIndex;
    const type = legend.chart.config.type;

    if (index > 1) {
        // Do the original logic
        if (type === 'pie' || type === 'doughnut') {
            pieDoughnutLegendClickHandler(e, legendItem, legend)
        } else {
            defaultLegendClickHandler(e, legendItem, legend);
        }

    } else {
        let ci = legend.chart;
        [
            ci.getDatasetMeta(0),
            ci.getDatasetMeta(1)
        ].forEach(function(meta) {
            meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                onClick: newLegendClickHandler
            }
        }
    }
});
```

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

### Chart.js Floating Bar Chart Data Generation

Source: https://www.chartjs.org/docs/latest/samples/bar/floating.html

Generates sample data for a Chart.js floating bar chart. Each dataset contains an array of pairs, where each pair represents the start and end value for a bar. This allows bars to not start at zero.

```javascript
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.red,
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.blue,
    },
  ]
};
```

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

### Initialize Chart.js Bar Chart

Source: https://www.chartjs.org/docs/latest/getting-started/usage.html

Demonstrates how to import Chart.js, define a dataset, and instantiate a new Chart object to render a bar chart within a canvas element.

```javascript
import Chart from 'chart.js/auto'

(async function() {
  const data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];

  new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );
})();
```

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

### GET /registry/get

Source: https://www.chartjs.org/docs/latest/api/interfaces/TypedRegistry.html

Retrieves a registered item by its unique identifier.

```APIDOC
## GET /registry/get

### Description
Retrieves a specific item of type T from the registry using its ID.

### Method
GET

### Endpoint
/registry/get

### Parameters
#### Query Parameters
- **id** (string) - Required - The unique identifier of the item to retrieve.

### Response
#### Success Response (200)
- **item** (T) - The requested component instance.

### Response Example
{
  "item": { "id": "my-component", "type": "plugin" }
}
```

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

### Define Scriptable Options

Source: https://www.chartjs.org/docs/latest/general/options

Demonstrates how to use functions for option values to enable dynamic styling based on data context. The first function uses data values to determine color, while the second uses a resolver to access other options.

```javascript
color: function(context) {
    const index = context.dataIndex;
    const value = context.dataset.data[index];
    return value < 0 ? 'red' : 
        index % 2 ? 'blue' : 
        'green';
},
borderColor: function(context, options) {
    const color = options.color;
    return Chart.helpers.color(color).lighten(0.2);
}
```

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

### GET /getMeta

Source: https://www.chartjs.org/docs/latest/api/interfaces/PolarAreaController.html

Retrieves the metadata associated with the chart controller.

```APIDOC
## GET /getMeta

### Description
Retrieves the ChartMeta object for the current controller instance.

### Method
GET

### Endpoint
/getMeta

### Response
#### Success Response (200)
- **meta** (ChartMeta) - The metadata object containing chart configuration and state.

#### Response Example
{
  "meta": { "type": "doughnut", "index": 0 }
}
```

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

### Enable and Configure Colors Plugin

Source: https://www.chartjs.org/docs/latest/general/colors.html

Demonstrates how to register the built-in Colors plugin, disable it, or force it to override existing colors for dynamic datasets.

```javascript
import { Colors } from 'chart.js';

Chart.register(Colors);

// To disable:
const options = {
  plugins: {
    colors: {
      enabled: false
    }
  }
};

// To force override:
const optionsForce = {
  plugins: {
    colors: {
      forceOverride: true
    }
  }
};
```

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

### GET /getTicks

Source: https://www.chartjs.org/docs/latest/api/interfaces/TimeScale.html

Retrieves the array of ticks currently generated for the scale.

```APIDOC
## GET /getTicks

### Description
Returns the list of tick objects currently used by the scale.

### Method
GET

### Endpoint
/getTicks

### Response
#### Success Response (200)
- **ticks** (Array) - An array of Tick objects.

#### Response Example
{
  "ticks": [{"value": 0, "label": "0"}, {"value": 10, "label": "10"}]
}
```

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

### Configure Chart.js Line Chart with Suggested Axis Range

Source: https://www.chartjs.org/docs/latest/axes

This example shows how to create a line chart in Chart.js and configure the y-axis with suggested minimum and maximum values. The `suggestedMin` and `suggestedMax` options influence the auto-scaling behavior of the axis, allowing for expanded data ranges while maintaining responsiveness.

```javascript
let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            y: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});
```

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

### GET /getStyle

Source: https://www.chartjs.org/docs/latest/api/interfaces/PolarAreaController.html

Retrieves the style object for a specific data point.

```APIDOC
## GET /getStyle

### Description
Retrieves the styling configuration for a data point at a specific index.

### Method
GET

### Endpoint
/getStyle

### Parameters
#### Query Parameters
- **index** (number) - Required - The index of the data point.
- **active** (boolean) - Required - Whether the point is currently in an active state.

### Response
#### Success Response (200)
- **style** (AnyObject) - The style configuration object.

#### Response Example
{
  "backgroundColor": "#ff0000",
  "borderColor": "#000000"
}
```

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

### GET /getMinMax

Source: https://www.chartjs.org/docs/latest/api/interfaces/PolarAreaController.html

Calculates the minimum and maximum values for a given scale.

```APIDOC
## GET /getMinMax

### Description
Calculates the min and max values for a specific scale, optionally considering stacking.

### Method
GET

### Endpoint
/getMinMax

### Parameters
#### Query Parameters
- **scale** (Scale) - Required - The scale object to calculate bounds for.
- **canStack** (boolean) - Optional - Whether to include stacked values in the calculation.

### Response
#### Success Response (200)
- **min** (number) - The minimum value.
- **max** (number) - The maximum value.

#### Response Example
{
  "min": 0,
  "max": 100
}
```

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

### Create a Bar Chart with Chart.js

Source: https://www.chartjs.org/docs/latest/getting-started

This snippet demonstrates how to create a basic bar chart using Chart.js. It includes setting up the HTML canvas, including the Chart.js library via CDN, and initializing a new chart with data and options. Dependencies include the Chart.js library.

```html
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>
```

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

### Load Chart.js with RequireJS (UMD Build)

Source: https://www.chartjs.org/docs/latest/getting-started/integration.html

When using RequireJS, which primarily loads AMD modules, you must use one of Chart.js's UMD builds (e.g., `chart.umd.min.js`). This example shows how to properly require the UMD build and initialize a chart.

```javascript
require(['path/to/chartjs/dist/chart.umd.min.js'], function(Chart){
    const myChart = new Chart(ctx, {...});
});
```

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

### GET /getValueForPixel

Source: https://www.chartjs.org/docs/latest/api/interfaces/TimeScale.html

Retrieves the data value corresponding to a specific pixel coordinate on the canvas.

```APIDOC
## GET /getValueForPixel

### Description
Used to get the data value from a given pixel. This is the inverse of getPixelForValue. The coordinate (0, 0) is at the upper-left corner of the canvas.

### Method
GET

### Endpoint
/getValueForPixel

### Parameters
#### Query Parameters
- **pixel** (number) - Required - The pixel coordinate to convert.

### Response
#### Success Response (200)
- **value** (number) - The data value at the specified pixel.

#### Response Example
{
  "value": 150.5
}
```

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

### GET /api/chart/controller-interface

Source: https://www.chartjs.org/docs/latest/developers/charts.html

Defines the mandatory interface and optional methods for implementing a custom dataset controller.

```APIDOC
## GET /api/chart/controller-interface

### Description
Outlines the required properties and methods for a valid dataset controller implementation.

### Method
GET

### Endpoint
DatasetController Interface

### Parameters
#### Required Properties
- **defaults** (object) - Default configuration for the chart type.
- **id** (string) - Unique identifier for the controller.
- **update** (function) - Method to update elements in response to data changes.

#### Optional Methods
- **draw** (function) - Custom rendering logic.
- **initialize** (function) - Controller initialization.
- **linkScales** (function) - Scale linking logic.
- **parse** (function) - Data parsing logic.
```

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

### Initialize Chart.js Data Structure

Source: https://www.chartjs.org/docs/latest/samples/advanced/progress-bar.html

Sets up the initial data object and references to DOM elements for progress tracking. It uses utility functions to generate random numbers and labels for the chart datasets.

```javascript
const initProgress = document.getElementById('initialProgress');
const progress = document.getElementById('animationProgress');
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
    },
    {
      label: 'Dataset 2',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
    }
  ]
};
```

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

### Initialize Chart.js Data Structure

Source: https://www.chartjs.org/docs/latest/samples/animations/drop.html

Sets up the initial data object for a line chart, including labels and multiple datasets. It demonstrates the use of helper utilities for generating random numbers and styling colors.

```javascript
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      animations: {
        y: { duration: 2000, delay: 500 }
      },
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      fill: 1,
      tension: 0.5
    },
    {
      label: 'Dataset 2',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
    }
  ]
};
```

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

### Initialize Chart.js Line Chart

Source: https://www.chartjs.org/docs/latest/developers/api.html

This snippet shows the basic initialization of a line chart using Chart.js. It requires a canvas context and a configuration object.

```javascript
const myLineChart = new Chart(ctx, config);
```

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

### GET /options/scales/ticks/styling

Source: https://www.chartjs.org/docs/latest/axes/cartesian

Configuration options for styling tick labels, including fonts, colors, and backdrop settings.

```APIDOC
## GET options.scales[scaleId].ticks (Styling)

### Description
Defines styling properties for tick labels across all axes, including font, color, and backdrop rendering.

### Method
GET

### Parameters
#### Request Body
- **backdropColor** (Color) - Optional - Color of label backdrops.
- **display** (boolean) - Optional - Whether to show tick labels.
- **color** (Color) - Optional - Color of the tick text.
- **font** (Font) - Optional - Font configuration object.
- **showLabelBackdrop** (boolean) - Optional - Whether to draw a background behind labels.
- **z** (number) - Optional - z-index of the tick layer.

### Response
#### Success Response (200)
- **config** (object) - Returns the current styling configuration object.
```

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

### GET /options/scales/ticks

Source: https://www.chartjs.org/docs/latest/axes/cartesian

Configuration options for tick labels on Cartesian axes, controlling layout, rotation, and visibility.

```APIDOC
## GET options.scales[scaleId].ticks

### Description
Defines common tick options for all Cartesian axes, including auto-skipping logic and label rotation settings.

### Method
GET

### Parameters
#### Request Body
- **align** (string) - Optional - Tick alignment ('start', 'center', 'end', 'inner').
- **crossAlign** (string) - Optional - Perpendicular alignment ('near', 'center', 'far').
- **sampleSize** (number) - Optional - Number of ticks to examine for label fitting.
- **autoSkip** (boolean) - Optional - Whether to automatically hide labels to prevent overlap.
- **maxRotation** (number) - Optional - Maximum rotation for labels on horizontal scales.
- **maxTicksLimit** (number) - Optional - Maximum number of ticks to display.

### Response
#### Success Response (200)
- **config** (object) - Returns the current tick configuration object.
```

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

### Configure Stacked Bar Chart

Source: https://www.chartjs.org/docs/latest/charts/bar.html

Shows how to initialize a bar chart with the stacked configuration enabled on both the x and y axes to display data series as stacked segments.

```javascript
const stackedBar = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true
            }
        }
    }
});
```

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

### Point Style Actions

Source: https://www.chartjs.org/docs/latest/samples/line/point-styling.html

Provides examples of JavaScript functions to dynamically change the point style of a Chart.js chart.

```APIDOC
## Chart.js Point Style Actions

### Description
This section provides a list of JavaScript functions that can be used to dynamically update the `pointStyle` of datasets in a Chart.js chart. Each action targets a specific point style.

### Method
N/A (JavaScript Functions)

### Endpoint
N/A (Client-side interaction)

### Parameters
Each action function accepts the chart instance as an argument.

#### Action Functions
- **pointStyle: circle (default)**: Sets `pointStyle` to 'circle'.
- **pointStyle: cross**: Sets `pointStyle` to 'cross'.
- **pointStyle: crossRot**: Sets `pointStyle` to 'crossRot'.
- **pointStyle: dash**: Sets `pointStyle` to 'dash'.
- **pointStyle: line**: Sets `pointStyle` to 'line'.
- **pointStyle: rect**: Sets `pointStyle` to 'rect'.
- **pointStyle: rectRounded**: Sets `pointStyle` to 'rectRounded'.
- **pointStyle: rectRot**: Sets `pointStyle` to 'rectRot'.
- **pointStyle: star**: Sets `pointStyle` to 'star'.
- **pointStyle: triangle**: Sets `pointStyle` to 'triangle'.
- **pointStyle: false**: Sets `pointStyle` to `false` (hides points).

### Request Example
```javascript
const actions = [
  {
    name: 'pointStyle: circle (default)',
    handler: (chart) => {
      chart.data.datasets.forEach(dataset => {
        dataset.pointStyle = 'circle';
      });
      chart.update();
    }
  },
  {
    name: 'pointStyle: cross',
    handler: (chart) => {
      chart.data.datasets.forEach(dataset => {
        dataset.pointStyle = 'cross';
      });
      chart.update();
    }
  },
  // ... other actions for different point styles
  {
    name: 'pointStyle: false',
    handler: (chart) => {
      chart.data.datasets.forEach(dataset => {
        dataset.pointStyle = false;
      });
      chart.update();
    }
  }
];
```

### Response
N/A (Client-side interaction)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### GET /options/scales/{scaleId}

Source: https://www.chartjs.org/docs/latest/axes/cartesian

Retrieves or defines the configuration schema for a specific scale ID within Chart.js options.

```APIDOC
## GET /options/scales/{scaleId}

### Description
Defines the configuration for a specific scale. This includes common axis properties and Cartesian-specific settings.

### Method
GET

### Endpoint
/options/scales/{scaleId}

### Parameters
#### Path Parameters
- **scaleId** (string) - Required - The unique identifier for the scale.

#### Request Body
- **type** (string) - Optional - Type of scale (e.g., 'linear', 'category').
- **display** (boolean|string) - Optional - Visibility of the axis.
- **min** (number) - Optional - User-defined minimum value.
- **max** (number) - Optional - User-defined maximum value.
- **position** (string|object) - Optional - Positioning of the axis (e.g., 'top', 'left', or object for data-relative).
- **bounds** (string) - Optional - Scale boundary strategy ('data' or 'ticks').

### Request Example
{
  "type": "linear",
  "position": "left",
  "min": 0,
  "max": 100
}

### Response
#### Success Response (200)
- **status** (string) - Configuration applied successfully.

#### Response Example
{
  "status": "success",
  "scaleId": "y"
}
```

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

### Chart.js Bar Chart Data Structure

Source: https://www.chartjs.org/docs/latest/charts/bar.html

Sets up the data object for a bar chart, including labels and dataset configurations. This example shows how to define labels and dataset properties like background and border colors.

```javascript
const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
};
```

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

### Get Minimum and Maximum Values

Source: https://www.chartjs.org/docs/latest/api/interfaces/TimeScale.html

Calculates the min and max values for the scale, optionally considering stacking configurations.

```typescript
getMinMax(canStack: boolean): { min: number, max: number };
```

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

### TypeScript Declaration Merging for Custom Charts

Source: https://www.chartjs.org/docs/latest/developers/charts.html

Provides an example of how to augment the ChartTypeRegistry in TypeScript to support custom chart types.

```typescript
import { ChartTypeRegistry } from 'chart.js';

declare module 'chart.js' {
    interface ChartTypeRegistry {
        derivedBubble: ChartTypeRegistry['bubble']
    }
}
```