charts/mixed

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

Create mixed chart with multiple chart types

With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. When creating a mixed chart, specify the chart type on each dataset individually. A common example is a bar chart that also includes a line dataset.

Mixed chart example with order property

Example of controlling dataset drawing order in a mixed chart: const mixedChart = new Chart(ctx, { type: 'bar', data: { datasets: [{ label: 'Bar Dataset', data: [10, 20, 30, 40], order: 2 }, { label: 'Line Dataset', data: [10, 10, 10, 10], type: 'line', order: 1 }], labels: ['January', 'February', 'March', 'April'] }, options: options }); The bar dataset with order: 2 is drawn below; the line dataset with order: 1 is drawn on top.

Order property affects stacking, legend, and tooltip

The order property affects not only drawing order but also stacking, legend, and tooltip behavior. Specifying order is essentially the same as reordering the datasets.

Dataset drawing order with order property

By default, datasets are drawn such that the first one is top-most. This can be altered by specifying the order option on datasets. The order property defaults to 0. The order property behaves like a weight instead of a specific order: the higher the number, the sooner that dataset is drawn on the canvas, so other datasets with a lower order number will get drawn over it.

Default options behavior in mixed charts

The default options for the charts are only considered at the dataset level and are not merged at the chart level in mixed charts.

Mixed chart example with bar and line datasets

Example of creating a mixed chart with both bar and line datasets: const mixedChart = new Chart(ctx, { data: { datasets: [{ type: 'bar', label: 'Bar Dataset', data: [10, 20, 30, 40] }, { type: 'line', label: 'Line Dataset', data: [50, 50, 50, 50], }], labels: ['January', 'February', 'March', 'April'] }, options: options });

Dataset type override for mixed charts

A dataset can override the type property from the chart configuration. This is the mechanism used to construct mixed charts, where different datasets can have different chart types.

Dataset order property controls rendering layering

The order property on datasets controls which datasets are drawn first. A lower order value draws earlier (further back), and a higher order value draws later (further forward). In the combo bar/line example, the line dataset has order: 0 and the bar dataset has order: 1, so the bars render on top of the line.

Override chart type per dataset in mixed charts

When creating a mixed chart, set the type property on individual datasets to override the base chart type. For example, in a bar chart with type: 'bar' as the root, adding type: 'line' to a specific dataset will render that dataset as a line instead of bars.

Combo bar/line chart with mixed dataset types

A combo bar and line chart is created by setting the main chart type to 'bar' and then specifying individual datasets with type: 'line' to render them as line charts. The first dataset renders as bars (the default bar chart type), and the second dataset with type: 'line' renders as a line. Each dataset can have its own colors and configuration.

Stacked bar/line chart with mixed types

A chart can combine bar and line datasets in a single visualization by setting different `type` properties on individual datasets. To stack the values, set `stacked: true` on the y-axis scale and assign a `stack` property to each dataset. In this example, Dataset 1 has `type: 'bar'` while Dataset 2 has no type specified (defaulting to the chart's main type of 'line'), both with `stack: 'combined'` to group them together for stacking.

Stacked bar/line chart example code

```js const data = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], datasets: [ { label: 'Dataset 1', data: [10, 20, 30, 40, 50, 60, 70], borderColor: '#ff0000', backgroundColor: 'rgba(255, 0, 0, 0.5)', stack: 'combined', type: 'bar' }, { label: 'Dataset 2', data: [15, 25, 35, 45, 55, 65, 75], borderColor: '#0000ff', backgroundColor: 'rgba(0, 0, 255, 0.5)', stack: 'combined' } ] }; const config = { type: 'line', data: data, options: { scales: { y: { stacked: true } } } }; ``` This example shows a mixed bar and line chart with stacked datasets grouped under the same stack identifier.

Mixed chart type with time scale

A time scale can be used in a mixed/combo chart where different datasets have different chart types (bar, line, etc.). The base chart type is set at the config level, while individual datasets can override this with their own type property.

showLines renamed to showLine in v3

In Chart.js 3.x, the chart option `showLines` was renamed to `showLine` to match the dataset option.

Give your agent this brain