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