Charts

Chart.js

.. chartjs:: [template:]name

This directive creates a chart based on Chart.js.

• Chart.js documentation

• Chart types

• Chart.js examples

The charts are constructed in JavaScript, by importing the chart module and calling chart() for each chartjs directive, referencing it by name and providing the chart configuration. Defaults can be set via the chartjs: metadata, and are expanded.

```{chartjs} v-bar
```

<script type="module">
const [core, {chart}] = await tdoc.imports('tdoc/core.js', 'tdoc/chart.js');

chart('v-bar', {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: '',
      data: [65, 59, 80, 81, 56, 55, 40],
      borderWidth: 1,
      borderColor: core.palette,
      backgroundColor: core.palette.map(c => c.with({a: 0.2})),
    }],
  },
  options: {scales: {y: {beginAtZero: true}}},
});
</script>

Alternatively, templates can be instantiated by prefixing the template name with template: and passing arguments in the directive content.

```{chartjs} template:json
type: 'bar',
data: {
  labels: ['Monday', 'Tuesday', 'Wednesday'],
  datasets: [{
    label: "Option A",
    data: [7, 11, 3],
    borderWidth: 1, borderColor: '@blue', hoverBorderColor: '@blue',
    backgroundColor: '@blue/0.2',
  }],
},
options: {
  scales: {y: {beginAtZero: true}},
  plugins: {legend: {display: false}},
},
```

Options

:class: name [name...] (IDs)

A space-separated list of CSS classes to add to the chart container.

:style: property: value; [property: value; ...]

CSS styles to apply to the chart container.

Templates

Templates are instantiated by specifying the template name prefixed by template: as the directive argument. The template arguments are provided in the directive content as a JSON5 array.

The predefined templates are described below. Custom templates can be created in JavaScript via template().

json

This template renders a chart with a static JSON config. The chart configuration is provided in the directive content, and is expanded.

```{chartjs} template:json
type: 'bar',
data: {
  labels: ['Monday', 'Tuesday', 'Wednesday'],
  datasets: [{
    label: "Option A",
    data: [7, 11, 3],
    borderWidth: 1, borderColor: '@blue', hoverBorderColor: '@blue',
    backgroundColor: '@blue/0.2',
  }],
},
options: {
  scales: {y: {beginAtZero: true}},
  plugins: {legend: {display: false}},
},
```

Expansion

• Attributes named color or ending with Color with a value starting with @ are expanded by looking up the color by name in core.colors. The color name can optionally be followed by / and an alpha value in the range \(\left[0; 1\right]\).

  • "@blue" → "rgb(54, 162, 235)"

  • "@red" → "rgb(255, 99, 132)"

  • "@blue/0.2" → "rgba(54, 162, 235, 0.2)"

tdoc/chart.js

This module (source) provides functionality related to chartjs directives.

chart.chart(el, config)

Render the content of a chartjs directive.

Arguments:

• el (string|HTMLElement) -- The name of the chartjs directive to construct, or the wrapper DOM element that should contain the chart.

• config (Object) -- The chart configuration.

Returns:

A Promise that resolves to the created Chart instance.

chart.template(name, fn)

Render all chartjs directives referencing the template with the given name.

Arguments:

• name (string) -- The name of the template.

• fn (function) -- A function to be called for each chartjs directive to render. The function receives the wrapper DOM element as its first argument, and the content of the directive as a JSON object as its second argument.

```{chartjs} template:random-bars
count: 3, min: 10, max: 50,
```
```{chartjs} template:random-bars
count: 5, min: 100, max: 500,
```

<script type="module">
const [core, {template}] = await tdoc.imports('tdoc/core.js', 'tdoc/chart.js');
template('random-bars', (el, {count, min, max}) => {
  const labels = [], data = [];
  for (let i = 0; i < count; ++i) {
    labels.push(`L${i + 1}`);
    data.push(core.randomInt(min, max));
  }
  chart(el, {
    type: 'bar',
    data: {
      labels,
      datasets: [{
        data, borderWidth: 1, borderColor: core.colors.blue,
        backgroundColor: core.colors.blue.with({a: 0.2}),
        hoverBorderColor: core.colors.blue,
      }],
    },
    options: {
      scales: {y: {beginAtZero: true}},
      plugins: {legend: {display: false}},
    },
  })
});
</script>