C&C Docs
Log in

cnc-chart

Charts by ApexCharts — lines, areas, bars, pies, radial gauges, heatmaps, candlesticks and more, all from one options object. The wrapper adds three conveniences on top: type, width and height as attributes, and automatic light / dark theming that follows the page.

Quick start

Set type and height as attributes, and bind $options to an ApexCharts config. Series and axes go in the config; the wrapper fills in the rest. 

// the block's controller
export default {
  chartArea: {
    series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }],
    xaxis: { categories: ['Jan', 'Feb', 'Mar', …] },
    chart: { background: 'transparent' },
  },
}

<cnc-chart type="area" height="300" $options="chartArea"></cnc-chart>

Two ways to pass the config, and one rule

Route How When
$options The prop, serialised to data-options on the inner container and parsed back on mount. Almost always. The chart's data lives with the rest of the block's state.
el._options An object assigned onto the element from page script. When the config is assembled outside the controller. Wins over the attribute.

The config must survive JSON

Both routes go through JSON.parse(JSON.stringify(...)), so a formatter, a tooltip.custom, an event handler or a Date is silently dropped. Anything ApexCharts can be told with plain data works; anything needing a function does not. Format your labels before they reach the chart.

Things to know

  • Nothing renders on the server. The chart is drawn in mount() after ApexCharts has been fetched from a CDN, so the first paint is an empty box. Reserve its height with the height attribute so the page does not jump.
  • Functions in the config are dropped, not rejected. No warning, no error — a formatter simply never runs. This is the single most common surprise; see the rule above.
  • A changed $options does not redraw. The re-render observer watches the wrong attribute. type, width and height do work.
  • Set chart.background to transparent. ApexCharts paints its own background otherwise, which shows as a pale rectangle inside a dark card.
  • The library is pinned to 3.40.0 on a CDN. No network, no chart. A deployment that cannot reach cdnjs.cloudflare.com needs the import in cnc-chart.mjs pointed at a local copy.

Usage guidance

cnc-chart is the one to reach for when the chart is the point of the page and needs to look finished: it themes itself, it has the widest range of chart types, and its defaults are presentable. cnc-chart2 wraps Chart.js instead — smaller, canvas-based, and with no theme handling, so you supply the colours. For a single trend line beside a number, use cnc-sparkline or cnc-sparkbar and skip the library entirely; for time series with pan and zoom over many points, cnc-plot is built for that.

← Back to Widgets