Charts

Description

Chart.js wrappers and chart card presenters for Enso UI.

Installation

Install the package:

yarn add @enso-ui/charts

This package is also available through the full enso-ui workspace bundle.

Features

exports the low-level Chart component plus the shared color palette
ships higher-level Bulma presenters such as ChartCard and EnsoChartCard for Enso dashboards
registers Chart.js plugins for data labels and annotations out of the box
supports runtime option mutation, dataset updates, SVG export, and responsive resizing

Usage

<script setup>
import { Chart, colors } from '@enso-ui/charts';

const data = {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ label: 'Orders', data: [3, 7, 5], backgroundColor: colors.slice(0, 3) }],
};
</script>

<Chart type="bar" :data="data" />

API

`Chart`

Low-level Chart.js canvas wrapper.

Import: @enso-ui/charts

Props:

data: object chart labels and datasets.
display: function datalabel visibility strategy.
shortNumbers: boolean = false enables short number formatting.
valueFormatter: function value formatter for datalabels.
scaleFormatter: function callback used to mutate scale config.
options: object = {} chart options override.
type: string one of line, bar, horizontalBar, radar, polarArea, pie, doughnut, bubble.