Chart.js wrappers and chart card presenters for Enso UI.
Install the package:
yarn add @enso-ui/chartsThis package is also available through the full enso-ui workspace bundle.
- exports the low-level
Chartcomponent plus the shared color palette - ships higher-level Bulma presenters such as
ChartCardandEnsoChartCardfor 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
<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" />Low-level Chart.js canvas wrapper.
Import: @enso-ui/charts
Props:
data: objectchart labels and datasets.display: functiondatalabel visibility strategy.shortNumbers: boolean = falseenables short number formatting.valueFormatter: functionvalue formatter for datalabels.scaleFormatter: functioncallback used to mutate scale config.options: object = {}chart options override.type: stringone ofline,bar,horizontalBar,radar,polarArea,pie,doughnut,bubble.
Methods:
resize()svg()update()
Default export palette array used by charts and cards.
Import: @enso-ui/charts
Bulma card wrapper around Chart that fetches its config from an HTTP source.
Import: @enso-ui/charts/src/bulma/ChartCard.vue
Chart card variant wired to injected Enso i18n and errorHandler helpers.
Import: @enso-ui/charts/src/bulma/EnsoChartCard.vue
The backend companion usually provides the HTTP endpoints and chart payloads consumed by ChartCard and EnsoChartCard.
@enso-ui/card↗@enso-ui/directives↗@enso-ui/mixins↗chart.jschartjs-plugin-annotationchartjs-plugin-datalabels
are welcome. Pull requests are great, but issues are good too.
Thank you to all the people who already contributed to Enso!