C&C Docs
Log in

cnc-chart2

Charts drawn on a <canvas> by Chart.js . One property takes the whole Chart.js config — { type, data, options } — and the widget does nothing else: no attribute shorthands, no theming, no events. Where cnc-chart has opinions, this one is a thin pipe.

Quick start

Give the widget a container with a height and bind $options. A canvas has no intrinsic size, so maintainAspectRatio: false plus a sized parent is the combination that behaves. 

// the block's controller
export default {
  chartBar: {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{ label: 'Revenue', data: [12, 19, 3] }],
    },
    options: { responsive: true, maintainAspectRatio: false },
  },
}

<div style="height: 280px">
  <cnc-chart2 $options="chartBar"></cnc-chart2>
</div>

Colours are yours to supply

This is the main difference from cnc-chart, and the thing to get right first. Chart.js defaults to dark grey text and grid lines, which vanish on a dark page, and the widget does nothing about it — there is no theme handling here at all. Set the four things that matter to a colour that works in both modes:

Where Controls
scales.x.ticks.color Axis labels.
scales.x.grid.color Grid lines. A translucent slate reads on either background.
plugins.legend.labels.color The legend text.
datasets[].backgroundColor The marks themselves. Chart.js picks nothing for you beyond a default grey. 
const GRID = 'rgba(148, 163, 184, 0.25)'   // slate-400 at 25%
const INK  = '#94a3b8'                     // slate-400

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: { grid: { color: GRID }, ticks: { color: INK } },
    y: { grid: { color: GRID }, ticks: { color: INK } },
  },
  plugins: { legend: { labels: { color: INK } } },
}

Every chart on this page uses exactly that. Switch the page's colour mode and check: the axes stay readable, but nothing re-themes — the colours are simply chosen to work in both.

Things to know

  • Give the parent a height. The widget is a bare <canvas>, and a canvas has no intrinsic size. Without maintainAspectRatio: false and a sized container, the chart either collapses or grows without limit.
  • No theming, at all. Chart.js does not know what colour the page is and the widget does not tell it. Pick colours that work in both modes, as above — or use cnc-chart, which follows the page automatically.
  • Functions in the config are dropped. The config is JSON round-tripped, so a tick callback, a tooltip label formatter or an onClick never arrives. No warning is given.
  • A changed $options does not redraw. The widget installs an observer for exactly this, but it watches an options attribute on the element while the prop is written to data-options on the canvas, so it never fires.
  • The CDN import is unversioned. cdn.jsdelivr.net/npm/chart.js resolves to the latest release, so the library can change under a deployment without anything in this repository changing. Pin it before relying on it.

Usage guidance

Pick cnc-chart2 when you already know Chart.js, want a canvas rather than an SVG — which matters once a series runs to thousands of points — or need one of its types, like radar and polarArea. Pick cnc-chart when you would rather the chart theme itself and look finished without a palette decision. For one line beside a number, cnc-sparkline costs nothing; for interactive time series, cnc-plot.

← Back to Widgets