Training Example: Chart.js – Review the Data, Give Your Score & Compare to the Real AI Evaluation

[IMG: logo]

[H1] Chart.js

[H2] Simple yet flexible JavaScript charting library for the modern web

Get Started
Samples
Ecosystem
GitHub

[H3]
New in 4.0
Colors plugin
Default palette of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.

[H3]
New in 4.0
Tree-shaking
JavaScript bundle size can be reduced by dozens of kilobytes by registering only necessary components.

[IMG: Example of reduced bundle size from 48 KB to 14 KB]

[H3]
New in 3.5
Scale stacking
Layout boxes can be stacked and weighted in groups.

[H3]
New in 3.4
Subtitle plugin
A secondary title plugin with all the same options as main title.

[H3]
New in 3.1
Line segment styling
Line segments can be styled by any user defined criteria.

[H3]
New in 3.0
Advanced animations
Transitions of every property in every element can be configured individually and independently.

[H3]
New in 3.0
Performance!
Numerous performance enhancements have been introduced. This example has 1M (2x500k) points with the new decimation plugin enabled.

[H3]
New in 2.0
Mixed chart types
Mix and match bar and line charts to provide a clear visual distinction between datasets.

[H3]
New in 2.0
New chart axis types
Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.

[H3]
New in 2.0
Animate everything!
Out of the box stunning transitions when changing data, updating colours and adding datasets.

[H4] Open source
Chart.js is a community maintained project, contributions welcome!

[H4] 8 Chart types
Visualize your data in 8 different ways; each of them animated and customisable.

[H4] HTML5 Canvas
Great rendering performance across all modern browsers (IE11+).

[H4] Responsive
Redraws charts on window resize for perfect scale granularity.

[H2]
Find Chart.js on GitHub or Read detailed documentation

[H1] # Colors
Charts support three color options: for geometric elements, you can change background and border colors; for textual elements, you can change the font color. Also, you can change the whole canvas background.
[H2] # Default colors
If a color is not specified, a global default color from Chart.defaults is used: Name Type Description Default value backgroundColor Color Background color rgba(0, 0, 0, 0.1) borderColor Color Border color rgba(0, 0, 0, 0.1) color Color Font color #666 You can reset default colors by updating these properties of Chart.defaults: Chart.defaults.backgroundColor = '#9BD0F5';
Chart.defaults.borderColor = '#36A2EB';
Chart.defaults.color = '#000';
[H3] # Per-dataset color settings
If your chart has multiple datasets, using default colors would make individual datasets indistinguishable. In that case, you can set backgroundColor and borderColor for each dataset: const data = {
labels: ['A', 'B', 'C'],
datasets: [
{
label: 'Dataset 1',
data: [1, 2, 3],
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
},
{
label: 'Dataset 2',
data: [2, 3, 4],
borderColor: '#FF6384',
backgroundColor: '#FFB1C1',
}
]
};
However, setting colors for each dataset might require additional work that you'd rather not do. In that case, consider using the following plugins with pre-defined or generated palettes.
[H3] # Default color palette
If you don't have any preference for colors, you can use the built-in Colors plugin. It will cycle through a palette of seven Chart.js brand colors:
[IMG: Colors plugin palette]
All you need is to import and register the plugin: import { Colors } from 'chart.js';
Chart.register(Colors);
Note If you are using the UMD version of Chart.js, this plugin will be enabled by default. You can disable it by setting the enabled option to false: const options = {
plugins: {
colors: {
enabled: false
}
}
};
[H3] # Dynamic datasets at runtime
By default, the colors plugin only works when you initialize the chart without any colors for the border or background specified.
If you want to force the colors plugin to always color your datasets, for example, when using dynamic datasets at runtime you will need to set the forceOverride option to true: const options = {
plugins: {
colors: {
forceOverride: true
}
}
};
[H3] # Advanced color palettes
See the awesome list (opens new window) for plugins that would give you more flexibility defining color palettes.
[H2] # Color formats
You can specify the color as a string in either of the following notations: Notation Example Example with transparency Hexadecimal (opens new window) #36A2EB #36A2EB80 RGB (opens new window) or RGBA (opens new window) rgb(54, 162, 235) rgba(54, 162, 235, 0.5) HSL (opens new window) or HSLA (opens new window) hsl(204, 82%, 57%) hsla(204, 82%, 57%, 0.5) Alternatively, you can pass a CanvasPattern (opens new window) or CanvasGradient (opens new window) object instead of a string color to achieve some interesting effects.
[H2] # Patterns and Gradients
For example, you can fill a dataset with a pattern from an image. const img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = () => {
const ctx =

[H1] # Integration
Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems. If you're using a front-end framework (e.g., React, Angular, or Vue), please see available integrations (opens new window).
[H2] # Script Tag
<script src="path/to/chartjs/dist/chart.umd.min.js"></script>
<script>
const myChart = new Chart(ctx, {...});
</script>
[H2] # Bundlers (Webpack, Rollup, etc.)
Chart.js is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.
[H3] # Quick start
If you don't care about the bundle size, you can use the auto package ensuring all features are available: import Chart from 'chart.js/auto';
[H3] # Bundle optimization
When optimizing the bundle, you need to import and register the components that are needed in your application. The options are categorized into controllers, elements, plugins, scales. You can pick and choose many of these, e.g. if you are not going to use tooltips, don't import and register the Tooltip plugin. But each type of chart has its own bare-minimum requirements (typically the type's controller, element(s) used by that controller and scale(s)): Bar chart
BarController BarElement Default scales: CategoryScale (x), LinearScale (y) Bubble chart
BubbleController PointElement Default scales: LinearScale (x/y) Doughnut chart
DoughnutController ArcElement Not using scales Line chart
LineController LineElement PointElement Default scales: CategoryScale (x), LinearScale (y) Pie chart
PieController ArcElement Not using scales PolarArea chart
PolarAreaController ArcElement Default scale: RadialLinearScale (r) Radar chart
RadarController LineElement PointElement Default scale: RadialLinearScale (r) Scatter chart
ScatterController PointElement Default scales: LinearScale (x/y) Available plugins: Decimation Filler - used to fill area described by LineElement, see Area charts Legend SubTitle Title Tooltip Available scales: Cartesian scales (x/y) CategoryScale LinearScale LogarithmicScale TimeScale TimeSeriesScale Radial scales (r) RadialLinearScale
[H3] # Helper functions
If you want to use the helper functions, you will need to import these separately from the helpers package and use them as stand-alone functions. Example of Converting Events to Data Values using bundlers. import Chart from 'chart.js/auto';
import { getRelativePosition } from 'chart.js/helpers';
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
onClick: (e) => {
const canvasPosition = getRelativePosition(e, chart);
// Substitute the appropriate scale IDs
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
}
}
});
[H2] # CommonJS
Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic import: const { Chart } = await import('chart.js');
[H2] # RequireJS
Important: RequireJS can load only AMD modules (opens new window), so be sure to require one of the UMD builds instead (i.e. dist/chart.umd.min.js). require(['path/to/chartjs/dist/chart.umd.min.js'],

[H1] # Subtitle
Subtitle is a second title placed under the main title, by default. It has exactly the same configuration options with the main title.
[H2] # Subtitle Configuration
Namespace: options.plugins.subtitle. The global defaults for subtitle are configured in Chart.defaults.plugins.subtitle. Exactly the same configuration options with title are available for subtitle, the namespaces only differ.
[H2] # Example Usage
The example below would enable a title of 'Custom Chart Subtitle' on the chart that is created. const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
subtitle: {
display: true,
text: 'Custom Chart Subtitle'
}
}
}
});