new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Chart.js · all subjects

charts/pie

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Pie chart type setup

To create a pie chart, set the chart type to 'pie' in the configuration. Pie charts require a data object with labels array and datasets array containing at least one dataset with a label, data array with numeric values, and backgroundColor array for colors.

Pie chart basic example

const config = { type: 'pie', data: { labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'], datasets: [{ label: 'Dataset 1', data: [20, 30, 40, 50, 60], backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'] }] }, options: { responsive: true, plugins: { legend: { position: 'top' }, title: { display: true, text: 'Chart.js Pie Chart' } } } };

Pie chart dataset properties

A pie chart dataset requires: label (string) for the dataset name, data (array of numbers) for the slice values, and backgroundColor (array of colors) for each slice. Multiple datasets can be added to a pie chart.

Pie chart type configuration

A pie chart is created by setting the chart type to 'pie' in the configuration object.

Pie chart cutout option toggles doughnut view

Setting chart.options.cutout to 0 displays a full pie chart, while setting it to '50%' (or other percentage values) displays a doughnut chart with a hollow center. The cutout option can be modified at runtime and the chart updated.

Pie chart arc element styling with backgroundColor and hoverBackgroundColor

Pie chart slices can be styled using the elements.arc configuration. The backgroundColor and hoverBackgroundColor properties control the appearance of slices in normal and hover states respectively. These can be scriptable options that receive context information.

Pie chart with scriptable backgroundColor based on data value

This example shows a pie chart where backgroundColor is a scriptable function that receives the context object and uses ctx.parsed to access the slice's data value, coloring slices based on thresholds: red (#D60000) for values less than -50, orange (#F46300) for values -50 to 0, blue (#0358B6) for values 0 to 50, and green (#44DE28) for values above 50.

Pie chart plugins configuration

Pie chart plugins can be configured in options.plugins. Legend and tooltip plugins can be disabled by setting them to false.

Give your agent this brain