### Setup for Chart.js Annotation Example

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/line/labelVisibility.md

Initializes data and utility functions for the Chart.js annotation example. This includes generating sample data and defining helper functions for calculations.

```javascript
// <block:setup:4>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

```javascript
// <block:utils:3>
function average(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  return values.reduce((a, b) => a + b, 0) / values.length;
}

function min(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  return values.reduce((a, b) => Math.min(a, b), Infinity);
}
// </block:utils>
```

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

### Setup and Annotation Configuration

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/line/visibility.md

Configures the chart data and defines an annotation line that is displayed only when the second dataset is visible. The annotation's position is set to 'start'.

```js
// <block:setup:2> 
const DATA_COUNT = 6;
const MIN = 10;
const MAX = 100;

Utils.srand(8);
const jointValue = Utils.rand(MIN, MAX);

const dataCfg = Utils.numbers({count: DATA_COUNT, min: MIN, max: MAX});
dataCfg.push(jointValue, NaN, NaN, NaN, NaN, NaN, NaN);

const futureCfg = Utils.numbers({count: DATA_COUNT - 1, min: MIN, max: MAX});
futureCfg.splice(0, 0, NaN, NaN, NaN, NaN, NaN, NaN, jointValue);

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: dataCfg
  }, {
    data: futureCfg,
    borderDash: [6, 6]
  }]
};
// </block:setup>

// <block:annotation:1>
const annotation = {
  type: 'line',
  borderColor: 'black',
  borderWidth: 1,
  display: (ctx) => ctx.chart.isDatasetVisible(1),
  label: {
    display: true,
    content: 'Now',
    position: 'start'
  },
  scaleID: 'x',
  value: 'July'
};
// </block:annotation>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    plugins: {
      annotation: {
        annotations: {
          annotation
        }
      }
    }
  }
};
/* </block:config> */

const actions = [
  {
    name: 'Toggle annotation',
    handler: function(chart) {
      const visible = chart.isDatasetVisible(1);
      if (visible) {
        chart.options.scales.x.max = 'July';
      } else {
        chart.options.scales.x.max = undefined;
      }
      chart.setDatasetVisibility(1, !visible);
      chart.update();
    }
  }
];

module.exports = {
  actions: actions,
  config: config,
};

```

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

### Setup Data for Chart

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/polygon/stop.md

Initializes the data structure for the chart, including labels and datasets. This setup is required before applying any annotations.

```javascript
// <block:setup:7>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(5);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

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

### Chart.js Annotation Plugin Setup

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/label/lowerUpper.md

Initializes chart data, including labels and multiple datasets with random numbers. This setup is required for the annotation examples.

```javascript
// <block:setup:4>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{ data: Utils.numbers(numberCfg) }, {
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

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

### Setup Data and Configuration

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/label/point.md

Sets up the data and configuration for a line chart, including utility functions for data manipulation.

```javascript
// <block:setup:4>
const DATA_COUNT = 12;
const MIN = 0;
const MAX = 100;

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>

// <block:annotation1:1>
const annotation1 = {
  type: 'label',
  backgroundColor: 'rgba(245, 245, 245, 0.5)',
  content: (ctx) => 'Maximum value is ' + maxValue(ctx).toFixed(2),
  font: {
    size: 16
  },
  padding: {
    top: 6,
    left: 6,
    right: 6,
    bottom: 12
  },
  position: {
    x: (ctx) => maxIndex(ctx) <= 3 ? 'start' : maxIndex(ctx) >= 10 ? 'end' : 'center',
    y: 'end'
  },
  xValue: (ctx) => maxLabel(ctx),
  yAdjust: -6,
  yValue: (ctx) => maxValue(ctx)
};
// </block:annotation1>

// <block:annotation2:2>
const annotation2 = {
  type: 'point',
  backgroundColor: 'transparent',
  borderColor: (ctx) => ctx.chart.data.datasets[0].borderColor,
  pointStyle: 'rectRounded',
  radius: 10,
  xValue: (ctx) => maxLabel(ctx),
  yValue: (ctx) => maxValue(ctx)
};
// </block:annotation2>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    layout: {
      padding: {
        right: 10
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        max: 120,
        min: 0
      }
    },
    plugins: {
      annotation: {
        clip: false,
        annotations: {
          annotation1,
          annotation2
        }
      }
    }
  }
};
/* </block:config> */

// <block:utils:3>
function maxValue(ctx) {
  let max = 0;
  const dataset = ctx.chart.data.datasets[0];
  dataset.data.forEach(function(el) {
    max = Math.max(max, el);
  });
  return max;
}

function maxIndex(ctx) {
  const max = maxValue(ctx);
  const dataset = ctx.chart.data.datasets[0];
  return dataset.data.indexOf(max);
}

function maxLabel(ctx) {
  return ctx.chart.data.labels[maxIndex(ctx)];
}
// </block:utils>

const actions = [
  {
    name: 'Randomize',
    handler: function(chart) {
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
      });
      chart.update();
    }
  }
];

module.exports = {
  actions: actions,
  config: config,
};

```

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

### Chart Setup with Sample Data

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/interaction/dragging.md

Sets up the basic chart data including labels and a line dataset. This is a prerequisite for adding annotations.

```javascript
// <block:setup:6>
Utils.srand(8);

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    type: 'line',
    label: 'Dataset 1',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 2,
    fill: false,
    data: Utils.numbers({count: 7, min: 0, max: 100}),
  }]
};
// </block:setup>
```

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

### Setup Data and Configuration

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/line/hook.md

Sets up the data and configuration for a line chart, including the annotation plugin with a custom line annotation.

```javascript
// <block:setup:2> 
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>

// <block:annotation:1> 
const annotation = {
  type: 'line',
  borderColor: 'black',
  borderWidth: 3,
  scaleID: 'y',
  value: 55,
  beforeDraw: drawExtraLine
};
// </block:annotation>

// <block:utils:3> 
function drawExtraLine(context) {
  const ctx = context.chart.ctx;
  const width = context.chart.canvas.width;
  const {x, y, x2, y2, options} = context.element;
  ctx.save();
  ctx.lineWidth = options.borderWidth;
  ctx.strokeStyle = options.borderColor;
  ctx.setLineDash([6, 6]);
  ctx.lineDashOffset = options.borderDashOffset;
  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.lineTo(x, y);
  ctx.moveTo(x2, y2);
  ctx.lineTo(width, y);
  ctx.stroke();
  ctx.restore();
  return true;
}
// </block:utils>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    layout: {
      padding: {
        right: 50
      }
    },
    scales: {
      y: {
        stacked: true
      }
    },
    plugins: {
      annotation: {
        clip: false,
        annotations: {
          annotation
        }
      }
    }
  }
};
/* </block:config> */

const actions = [
  {
    name: 'Randomize',
    handler: function(chart) {
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
      });
      chart.update();
    }
  },
  {
    name: 'Add data',
    handler: function(chart) {
      chart.data.labels.push(chart.data.labels.length);
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data.push(Utils.rand(MIN, MAX));
      });
      chart.update();
    }
  },
  {
    name: 'Remove data',
    handler: function(chart) {
      chart.data.labels.shift();
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data.shift();
      });
      chart.update();
    }
  }
];

module.exports = {
  actions: actions,
  config: config,
};

```

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

### Chart Setup with Annotations

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/intro.md

Defines the chart data and configuration, including the setup of line and bar datasets and the integration of annotation plugin configurations.

```javascript
// <block:setup:3>
Utils.srand(8);

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    type: 'line',
    label: 'Dataset 1',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 2,
    fill: false,
    data: Utils.numbers({count: 7, min: -100, max: 100}),
  }, {
    type: 'bar',
    label: 'Dataset 2',
    backgroundColor: 'rgb(255, 99, 132)',
    data: Utils.numbers({count: 7, min: -100, max: 100}),
    borderColor: 'white',
    borderWidth: 2
  }, {
    type: 'bar',
    label: 'Dataset 3',
    backgroundColor: 'rgb(75, 192, 192)',
    data: Utils.numbers({count: 7, min: -100, max: 100}),
  }]
};
// </block:setup>

// <block:annotation1:1>
const annotation1 = {
  type: 'line',
  borderColor: 'black',
  borderWidth: 5,
  click: function({chart, element}) {
    console.log('Line annotation clicked');
  },
  label: {
    backgroundColor: 'red',
    content: 'Test Label',
    display: true
  },
  scaleID: 'y',
  value: Utils.rand(-100, 100)
};
// </block:annotation1>

// <block:annotation2:2>
const annotation2 = {
  type: 'box',
  backgroundColor: 'rgba(101, 33, 171, 0.5)',
  borderColor: 'rgb(101, 33, 171)',
  borderWidth: 1,
  click: function({chart, element}) {
    console.log('Box annotation clicked');
  },
  drawTime: 'beforeDatasetsDraw',
  xMax: 'April',
  xMin: 'February',
  xScaleID: 'x',
  yMax: Utils.rand(-100, 100),
  yMin: Utils.rand(-100, 100),
  yScaleID: 'y'
};
// </block:annotation2>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    plugins: {
      annotation: {
        annotations: {
          annotation1,
          annotation2
        }
      }
    }
  }
};
/* </block:config> */

const actions = [
  {
    name: 'Randomize',
    handler: function(chart) {
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data = Utils.numbers({count: 7, min: -100, max: 100});
      });
      chart.update();
    }
  },
];

module.exports = {
  actions: actions,
  config: config,
  output: 'console.log output is shown here, click one of the annotations'
};

```

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

### Setup and Annotation Configuration with Image Label

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/ellipse/image.md

This snippet shows the setup for a line chart and defines an ellipse annotation that uses an image obtained from Utils.getImage() as its label content. Ensure Utils.getImage() is correctly implemented to provide the image source.

```javascript
// <block:setup:2>
const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>

// <block:annotation:1>
const annotation = {
  type: 'ellipse',
  backgroundColor: 'rgba(0, 0, 0, 0.2)',
  borderWidth: 1,
  borderColor: '#F27173',
  yMin: 30,
  yMax: 80,
  xMax: 2,
  xMin: 5,
  label: {
    display: true,
    content: Utils.getImage(),
    width: 150,
    height: 150,
    position: 'center'
  }
};
// </block:annotation>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    plugins: {
      annotation: {
        annotations: {
          annotation
        }
      }
    }
  }
};
/* </block:config> */

const actions = [
  {
    name: 'Randomize',
    handler: function(chart) {
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
      });
      chart.update();
    }
  }
];

module.exports = {
  actions: actions,
  config: config
};

```

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

### Chart Setup with Data

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/line/limited.md

Sets up the initial chart data, including labels and two datasets with random number configurations. This is a prerequisite for adding annotations.

```javascript
// <block:setup:4>
const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

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

### Setup Chart Data

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/box/canvas.md

Initializes the data structure for the chart, including labels and dataset values. This setup is required before defining annotations.

```javascript
// <block:setup:3>
const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

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

### Setup Chart Data and Labels

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/line/average.md

Initializes data, labels, and configuration for the chart. This includes generating random data points within a specified range.

```javascript
// <block:setup:3>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

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

### Setup Chart Data

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/point/outsideChartArea.md

Sets up the data for the chart, including labels and datasets. This is a prerequisite for configuring annotations.

```javascript
// <block:setup:3>
const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

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

### Setup Chart Data and Configuration

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/box/image.md

Initializes the chart data, including labels and dataset values, and defines the chart configuration. Ensure 'Utils' is available for data generation.

```javascript
// <block:setup:2>
const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

```javascript
/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    plugins: {
      annotation: {
        annotations: {
          annotation
        }
      }
    }
  }
};
/* </block:config> */
```

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

### Setup for Annotation Selection

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/interaction/selection.md

Initializes data and state variables for managing selected annotations. Includes utility functions for handling mouse events and selection logic.

```javascript
// <block:setup:3>
let count = 0;
const selected = [];

Utils.srand(8);

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    type: 'line',
    label: 'Dataset 1',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 2,
    fill: false,
    data: Utils.numbers({count: 7, min: 0, max: 100}),
  }]
};
// </block:setup>
```

```javascript
// <block:utils:4>
function enter({chart, element}) {
  console.log(element.label.options.content + ' entered');
  if (!count) {
    chart.canvas.style.cursor = 'pointer';
  }
  count++;
}

function leave({chart, element}) {
  console.log(element.label.options.content + ' left');
  count--;
  if (!count) {
    chart.canvas.style.cursor = 'default';
  }
}

function select(element, selectedColor, unselectedColor) {
  console.log(element.label.options.content + ' selected');
  if (selected.includes(element)) {
    selected.splice(selected.indexOf(element), 1);
    element.options.backgroundColor = unselectedColor;
    element.label.options.font.size = 12;
  } else {
    selected.push(element);
    element.options.backgroundColor = selectedColor;
    element.label.options.font.size = 14;
  }
  return true;
}
// </block:utils>
```

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

### Chart.js Line Chart Setup

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/charts/line.md

Defines the data structure for a line chart, including labels and multiple datasets with random number configurations. This setup is required before applying annotations.

```javascript
// <block:setup:4>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: [10, 20, 30, 40, 50, 60, 70, 80],
  datasets: [{
    data: Utils.numbers(numberCfg),
  }, {
    data: Utils.numbers(numberCfg),
  }, {
    data: Utils.numbers(numberCfg),
  }]
};
// </block:setup>
```

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

### Setup Chart Data

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/ellipse/rotation.md

Initializes the data for the scatter chart, including generating points within specified ranges for two datasets.

```javascript
// <block:setup:4>
const DATA_COUNT = 8;
const MIN = [25, 65];
const MAX = [35, 75];

Utils.srand(8);

const data = {
  datasets: [{
    data: Utils.points({count: DATA_COUNT, min: MIN[0], max: MAX[0]})
  }, {
    data: Utils.points({count: DATA_COUNT, min: MIN[1], max: MAX[1]})
  }]
};
// </block:setup>
```

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

### Chart.js Annotation Plugin Setup with Image Label

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/line/image.md

This snippet shows the complete setup for a Chart.js line chart with an annotation that uses an image as its label. It includes data generation, annotation configuration, and chart options.

```javascript
// <block:setup:2>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>

// <block:annotation:1>
const annotation = {
  type: 'line',
  borderColor: 'black',
  borderWidth: 3,
  scaleID: 'y',
  value: 50,
  label: {
    display: true,
    content: Utils.getImage(),
    backgroundColor: 'white',
    borderWidth: 3,
    width: '20%',
    height: '20%',
    position: 'end'
  }
};
// </block:annotation>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    plugins: {
      annotation: {
        annotations: {
          annotation
        }
      }
    }
  }
};
/* </block:config> */

const actions = [
  {
    name: 'Randomize',
    handler: function(chart) {
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
      });
      chart.update();
    }
  },
  {
    name: 'Add data',
    handler: function(chart) {
      chart.data.labels.push(chart.data.labels.length);
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data.push(Utils.rand(MIN, MAX));
      });
      chart.update();
    }
  },
  {
    name: 'Remove data',
    handler: function(chart) {
      chart.data.labels.shift();
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data.shift();
      });
      chart.update();
    }
  }
];

module.exports = {
  actions: actions,
  config: config
};

```

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

### Install Chart.js Annotation Plugin

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/guide/index.md

Use npm to install the chartjs-plugin-annotation package. This plugin requires Chart.js version 4.0.0 or higher.

```bash
> npm install chartjs-plugin-annotation
```

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

### Chart Setup and Data Initialization

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/box/basic.md

Sets up the initial data for the scatter chart, including generating points and defining data ranges. This is required before configuring annotations.

```javascript
// <block:setup:4>
const DATA_COUNT = 8;
const MIN = [0, 50];
const MAX = [50, 100];

Utils.srand(8);

const data = {
  datasets: [{
    data: Utils.points({count: DATA_COUNT, min: MIN[0], max: MAX[0]})
  }, {
    data: Utils.points({count: DATA_COUNT, min: MIN[1], max: MAX[1]})
  }]
};
// </block:setup>
```

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

### Setup Chart Data and Configuration

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/box/quarters.md

Initializes the data for the line chart, including labels for months and random data points. It also sets up the basic chart configuration with scales and the annotation plugin.

```javascript
// <block:setup:5> 
const DATA_COUNT = 12;
const MIN = 10;
const MAX = 100;

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true,
        max: 120,
        min: 0
      }
    },
    plugins: {
      annotation: {
        common: {
          drawTime: 'beforeDraw'
        },
        annotations: {
          annotation1,
          annotation2,
          annotation3,
          annotation4
        }
      }
    }
  }
};
/* </block:config> */
```

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

### Setup Chart Data with Canvas Content Annotations

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/label/canvas.md

Configure the chart's data and options to include labels that render custom canvas content. This setup is essential for displaying images or complex HTML as annotations.

```javascript
// <block:setup:3>
const DATA_COUNT = 12;
const MIN = 0;
const MAX = 100;

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>

// <block:annotation1:1>
const annotation1 = {
  type: 'label',
  content: Utils.getHouse(),
  xValue: 9,
  yValue: 30
};
// </block:annotation1>

// <block:annotation2:2>
const annotation2 = {
  type: 'label',
  content: Utils.getSpiral(),
  xValue: 2,
  yValue: 50
};
// </block:annotation2>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true,
      }
    },
    plugins: {
      annotation: {
        annotations: {
          annotation1,
          annotation2
        }
      }
    }
  }
};
/* </block:config> */

const actions = [
  {
    name: 'Randomize',
    handler: function(chart) {
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
      });
      chart.update();
    }
  }
];

module.exports = {
  actions: actions,
  config: config
};

```

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

### Chart Setup with Image Label

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/label/image.md

Sets up a line chart with sample data and configures an annotation to display an image. This snippet includes data generation and the initial annotation configuration.

```javascript
// <block:setup:3>
const DATA_COUNT = 12;
const MIN = 0;
const MAX = 100;

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>

// <block:annotation1:1>
const annotation1 = {
  type: 'label',
  drawTime: 'afterDraw',
  content: Utils.getImage(),
  width: 100,
  height: 100,
  xValue: 4,
  yValue: 30,
  xAdjust: 150,
  yAdjust: -150,
  borderWidth: 1,
  borderDash: [6, 6],
  callout: {
    display: true,
    position: 'left'
  }
};
// </block:annotation1>

// <block:annotation2:2>
const annotation2 = {
  type: 'point',
  drawTime: 'afterDraw',
  xValue: 4,
  yValue: 30,
  radius: 10
};
// </block:annotation2>

/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true,
      }
    },
    plugins: {
      annotation: {
        annotations: {
          annotation1,
          annotation2
        }
      }
    }
  }
};
/* </block:config> */

const actions = [
  {
    name: 'Randomize',
    handler: function(chart) {
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
      });
      chart.update();
    }
  }
];

module.exports = {
  actions: actions,
  config: config
};

```

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

### Setup for Magic Quadrant Chart

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/box/gradient.md

Defines the metadata for the magic quadrant regions, including colors and labels, and generates random data points for the chart. This setup is required before defining annotations.

```javascript
// <block:setup:6>
const META = [[
  {color: 'rgb(255, 174, 201)', backgroundColor: 'rgba(255, 174, 201, 0.5)', label: 'Niche players'},
  {color: 'rgb(159, 168, 218)', backgroundColor: 'rgba(159, 168, 218, 0.5)', label: 'Visionaries'},
], [
  {color: 'rgb(255, 245, 157)', backgroundColor: 'rgba(255, 245, 157, 0.5)', label: 'Challengers'},
  {color: 'rgb(165, 214, 167)', backgroundColor: 'rgba(165, 214, 167, 0.5)', label: 'Leaders'},
]];
const DATA_COUNT = 12;
const MIN = 0.5;
const MAX = 9.5;

const data = {
  datasets: [{
    data: randomize(),
    pointRadius: 8
  }]
};
// </block:setup>
```

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

### Setup Chart Data and Configuration

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/interaction/interaction.md

Initializes the data and configuration for a Chart.js chart, including setting up scales and plugins. This block defines the basic structure for the chart.

```javascript
// <block:setup:3>
const AXIS = ['xy', 'x', 'y'];
const MODE = ['nearest', 'point', 'x', 'y'];

let axisIndex = 0;
let modeIndex = 0;

Utils.srand(8);

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    type: 'line',
    label: 'Dataset 1',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 2,
    fill: false,
    data: Utils.numbers({count: 7, min: 0, max: 100}),
  }]
};
// </block:setup>
```

```javascript
/* <block:config:0> */
const config = {
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        beginAtZero: true,
        min: 0,
        max: 100
      }
    },
    plugins: {
      title: {
        display: true,
        text: getTitle,
        position: 'bottom',
        font: {
          size: 14
        }
      },
      annotation: {
        annotations: {
          annotation1,
          annotation2
        }
      }
    }
  }
};
/* </block:config> */
```

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

### Scriptable Annotation Options Example

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/guide/options.md

Demonstrates how to use a function to dynamically control annotation visibility based on screen width. The function receives context and an options resolver.

```javascript
/* <block:options:0> */
const options = {
  plugins: {
    annotation: {
      annotations: {
        box1: {
          drawTime: 'afterDatasetsDraw',
          display: (context, opts) => {
            const body = document.querySelector('body');
            const rect = body.getBoundingClientRect();
            return rect.width >= 1000;
          },
          type: 'box',
          xMin: 1,
          xMax: 2,
          yMin: 50,
          yMax: 70,
          backgroundColor: 'rgba(255, 99, 132, 0.5)'
        }
      }
    }
  }
};
/* </block:options> */
```

```javascript
/* <block:config:1> */
const config = {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options
};
/* </block:config> */
```

```javascript
module.exports = {
  config
};
```

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

### Setup for Cartesian Plane

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/interaction/cartesianplane.md

Initializes variables for the rectangle and defines the minimum and maximum values for the axes.

```javascript
// <block:setup:5>
let rect;
const MIN = -10;
const MAX = 10;
// </block:setup>
```

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

### Chart Setup and Data Generation

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/doughnutLabel/background.md

Sets up the initial data structure and configuration constants for the doughnut chart, including data count, min/max values, and labels.

```javascript
const DATA_COUNT = 6;
const MIN = 0;
const MAX = 100;

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX, decimals: 0};

const data = {
  labels: ['Apples', 'Orange', 'Lime', 'Grapes', 'Apricots', 'Blackberries'],
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
```

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

### Setup Chart Data

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/polygon/basic.md

Configures the labels and datasets for a Chart.js line chart. This includes generating random data within specified ranges.

```javascript
// <block:setup:5>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(5);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }, {
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>
```

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

### Basic Line Annotation Setup

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/line/basic.md

Configures the data for a line chart and defines a basic line annotation. This snippet includes data generation and the annotation object itself.

```javascript
// <block:setup:2>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg)
  }]
};
// </block:setup>

// <block:annotation:1>
const annotation = {
  type: 'line',
  borderColor: 'black',
  borderWidth: 3,
  scaleID: 'y',
  value: 50
};
// </block:annotation>
```

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

### Bar Chart Setup with Annotations

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/charts/bar.md

This snippet sets up a bar chart with multiple datasets and configures annotations for lines and boxes. It includes data generation and chart configuration.

```javascript
// <block:setup:4>
const DATA_COUNT = 8;
const MIN = 10;
const MAX = 100;

Utils.srand(8);

const labels = [];
for (let i = 0; i < DATA_COUNT; ++i) {
  labels.push('Label ' + i);
}

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: labels,
  datasets: [{
    data: Utils.numbers(numberCfg),
  }, {
    data: Utils.numbers(numberCfg),
  }, {
    data: Utils.numbers(numberCfg),
  }]
};
// </block:setup>

// <block:annotation1:1>
const annotation1 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 0.5,
  label: {
    content: 'Line annotation at x=0.5',
    display: true
  },
};
// </block:annotation1>

// <block:annotation2:2>
const annotation2 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 'Label 5',
  label: {
    rotation: 'auto',
    position: 'start',
    backgroundColor: 'black',
    content: 'Line at x=Label 5',
    display: true
  }
};
// </block:annotation2>

// <block:annotation3:3>
const annotation3 = {
  type: 'box',
  xMin: 2.5,
  xMax: 3.5,
  yMin: 0,
  yMax: 100,
  backgroundColor: 'rgba(250, 250, 0, 0.4)',
  borderColor: 'rgba(0, 150, 0, 0.2)',
  drawTime: 'beforeDatasetsDraw',
  borderWidth: 0,
  borderRadius: 0,
};
// </block:annotation3>


/* <block:config:0> */
const config = {
  type: 'bar',
  data,
  options: {
    plugins: {
      annotation: {
        annotations: {
          annotation1,
          annotation2,
          annotation3
        }
      }
    },
  }
};
/* </block:config> */

const actions = [
  {
    name: 'Randomize',
    handler: function(chart) {
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
      });

      chart.update();
    }
  },
  {
    name: 'Add data',
    handler: function(chart) {
      chart.data.labels.push('Label ' + chart.data.labels.length);
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data.push(Utils.rand(MIN, MAX));
      });

      chart.update();
    }
  },
  {
    name: 'Remove data',
    handler: function(chart) {
      chart.data.labels.shift();
      chart.data.datasets.forEach(function(dataset, i) {
        dataset.data.shift();
      });

      chart.update();
    }
  }
];

module.exports = {
  actions: actions,
  config: config,
};

```

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

### Setup and Annotation Configuration

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/line/animation.md

Defines the chart data and configures a static line annotation. The line annotation is set to display at a value of 50 on the x-axis and is labeled 'Limit'.

```javascript
// <block:setup:3>
const uniqueId = new Date().getTime();

const data = {
  datasets: [{
    backgroundColor: 'rgba(63, 184, 175, 0.3)',
    borderColor: 'rgba(255, 0, 0, 0.0)',
    pointRadius: 0, // no dots
    tension: 0, // straight lines
    showLine: true,
    fill: true,
    data: [
      {x: 0, y: 0},
      {x: 50, y: 0},
      {x: 50, y: 1},
      {x: 100, y: 1}
    ]
  }]
};
// </block:setup>

// <block:annotation:1>
const line = {
  type: 'line',
  borderColor: 'red',
  borderWidth: 3,
  label: {
    display: true,
    content: 'Limit',
    rotation: 90
  },
  scaleID: 'x',
  value: 50
};
// </block:annotation>

/* <block:config:0> */
const config = {
  type: 'scatter',
  data,
  options: {
    _sampleId: uniqueId,
    plugins: {
      annotation: {
        annotations: {
          line
        }
      }
    }
  }
};
/* </block:config> */

// <block:utils:2>
document.getElementById('update').addEventListener('input', update);

function update() {
  const newValue = +document.querySelector('input[type=range]').value;
  const chart = Object.values(Chart.instances).find(c => c.options._sampleId === uniqueId);
  chart.data.datasets[0].data[1].x = newValue;
  chart.data.datasets[0].data[2].x = newValue;
  chart.options.plugins.annotation.annotations.line.value = newValue;
  chart.update();
}
// </block:utils>

module.exports = {
  config: config
};
```

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

### Setup Inner Chart Data

Source: https://github.com/chartjs/chartjs-plugin-annotation/blob/master/docs/samples/label/innerChart.md

Configures the data for the inner chart, including labels and multiple datasets with random number generation.

```javascript
const DATA_COUNT = 12;
const MIN = 0;
const MAX = 100;

const innerChart = Utils.getChart();
const innerDataset = innerChart.data.datasets[0];

const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [{
    data: Utils.numbers(numberCfg),
    borderColor: innerDataset.backgroundColor[0],
    backgroundColor: 'transparent'
  }, {
    data: Utils.numbers(numberCfg),
    borderColor: innerDataset.backgroundColor[1],
    backgroundColor: 'transparent',
    hidden: true
  }, {
    data: Utils.numbers(numberCfg),
    borderColor: innerDataset.backgroundColor[2],
    backgroundColor: 'transparent',
    hidden: true
  }]
};
```