Charts

NPM License npm download GitHub top language GitHub issues npm version

Vue Charts Package

Can be used outside of the Enso ecosystem.

Should be used with its backend sibling

For live examples and demos, you may visit laravel-enso.com

Installation

Install the package:

yarn add @enso-ui/charts

Note that this package has a couple of external dependencies. Read here for more info.

Usage

Import the desired component(s):

import { EnsoChartCard as ChartCard } from '@enso-ui/charts/bulma';
import { Chart, colors } from '@enso-ui/charts';

ChartCard.vue

Bulma Chart Card implementation on top of the Card component.

Example:

<chart-card class="is-rounded raises-on-hover has-margin-bottom-large"
    source="/api/dashboard/pie"/>

Props

  • collapsed - boolean, optional - controls the card's initial render state
  • errorHandler - function, optional - provides a custom error handler for axios
  • i18n - function, optional - provides localisation
  • params - Object, optional - parameter bag that is sent to the backend when fetching data
  • source - string, required - the URI used for fetching the chart data

Methods

  • fetch() - fetches data from the backend
  • resize() - resizes the charts

EnsoChartCard

The above component designed to be used within the Enso ecosystem, requiring less configuration from the dev.

Example:

<chart-card class="is-rounded raises-on-hover has-margin-bottom-large"
    source="/api/dashboard/pie"/>

Props

  • params - Object, optional, default null, extra parameters that get sent to the backend when fetching data
  • source - string, required, the URI used for fetching the chart data

Methods

  • fetch() - fetches data from the backend
  • resize() - resizes the charts

Chart

CSS framework agnostic Chart implementation.

Example:

<chart class="has-padding-medium"
    :data="data"
    :options="options"
    :type="type"/>

Props

  • data - Object, required - the data for the chart
  • formatter - function, optional - datalabels values formatter function
  • options - Object, optional - options object for chart.js
  • type - string, required - specifies the type of chart. Valid types are 'line', 'bar', 'radar', 'polarArea', 'pie', 'doughnut', 'bubble'.

Methods

  • resize() - resizes the charts

Questions & Issues

For questions and support please use the issues functionality for this package's github repository.

Please make sure to search for existing issues before creating a new issue, and when opening a new issue, fill the required information in the issue template.

Issues not conforming to the guidelines may be closed immediately.

External Dependencies

Built with chart.js.

Uses chartjs-plugin-datalabels

For PNG download uses file-saver

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

ISC