1.2.4 • Published 5 months ago
@freezystem/mjml-bar-chart v1.2.4
MJML Bar Chart
Getting started
First you'll have to install mjml-bar-chart
in your project.
npm install --save-dev mjml mjml-core @freezystem/mjml-bar-chart
Then import it and manually register the plugin.
with ESM:
import { registerComponent } from "mjml-core";
import MjBarChart from "@freezystem/mjml-bar-chart";
registerComponent(MjBarChart);
with CJS:
const { registerComponent } = require("mjml-core");
const MjBarChart = require("@freezystem/mjml-bar-chart");
registerComponent(MjBarChart);
You can now use the mjml-bar-chart
component in your MJML templates:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-bar-chart
title="Sum of Requests by Department"
dataset-labels="January,February,March"
datasets="[[33,14,27],[18,66,42],[7,15,21]]"
groups="support,sales,tech"
colors="#d8f3dc,#95d5b2,#52b788"/>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Yay, you're all set !
Customize
attribute | required | default | description |
---|---|---|---|
title | ✖️ | null | Chart title, if null will not display |
dataset-labels | ✔️ | null | Comma separated labels of each dataset |
datasets | ✔️ | null | Valid JSON array of same length integer array |
groups | ✔️ | null | Comma separated data group names |
colors | ✔️ | null | Comma separated CSS colors of each group |
axis-color | ✖️ | #d4d4d4 | CSS color of axis and scale numbers |
height | ✖️ | 200 | Chart height in pixel |
bar-width | ✖️ | 30 | Bar width in pixel |
separator-width | ✖️ | 30 | Separator width in pixel between datasets |
step-count | ✖️ | 5 | Step number on the chart scale, below 2 no steps will be displayed |
show-values | ✖️ | true | Whether or not it should display values above each bar |