Mjml-chart NPM

mjml-chart for mjml

Displays charts as images in your email. Note that the chart can be animated (gif) when the chan attribute is specified.

🎩 Usage

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-chart chs="700x200" chd="s:theresadifferencebetweenknowingthepathandwalkingthepath" cht="bvs" chxt="y" chf="b0,lg,90,4CA4F5,0.1,C371D3,0.8,EA469E,1" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

🚀 Setup

mjml-chart v5.x.x is built for MJML4 (Community components):

npm install mjml-chart@5 --save

cat <<EOF > .mjmlconfig
{
  "packages": [
    "mjml-chart/lib/index.js"
  ]
}
EOF

mjml-chart v4.x.x is built for MJML3:

npm install mjml-chart@4 --save

🚧 Documentation

attribute	description	value examples
cht	Chart type	`bvg`, `p`
chd	chart data	`a:-100,200.5,75.55,110`, `t:10,20,30\\|15,25,35`, `s:BTb19_,Mn5tzb`, `e:BaPoqM2s,-A__RMD6`
chds	data format with custom scaling	`-80,140`
choe	QRCode data encoding	`UTF-8`
chld	QRCode error correction level and optional margin	`L\\|4`, `M\\|10`, `Q\\|5`, `H\\|18`
chxr	Axis data-range	`0,0,200`, `0,10,50,5`, `0,0,500\\|1,0,200`
chof	Image output format	`.png`, `.svg`, `.gif`
chs	Chart size (x)	`400x400`
chdl	Text for each series, to display in the legend	`NASDAQ\\|FTSE100\\|DOW`
chdls	Chart legend text and style	`9e9e9e,17`
chg	Solid or dotted grid lines	`1,1`, `0,1,1,5`, `1,1,FF00FF`, `1,1,1,1,CECECE`
chco	series colors	`FFC48C`, `FF0000,00FF00,0000FF`
chtt	chart title	`My beautiful chart`
chts	chart title colors and font size	`00FF00,17`
chxt	Display values on your axis lines or change which axes are shown	`y`, `x,y`, `x,x,y`, `x,y,t,r,t`
chxl	Custom string axis labels on any axis	`0:\\|Jan\\|July\\|Jan`, `0:\\|Jan\\|July\\|Jan\\|1\\|10\\|20\\|30`
chxs	Font size, color for axis labels, both custom labels and default label values	`1,0000DD`, `1NcUSDMil,FF0000`, `1NcEUR,FF0000`, `2,0000DD,13,0,t`, `0Npper-month,0000FF`, `0Ne,000000\\|1NcUSDMil,FF0000\\|2N2sz,…`
chm	compound charts and line fills
chls	line thickness and solid/dashed style	`10`, `3,6,3\\|5`
chl	bar, pie slice, doughnut slice and polar slice chart labels	`label1\\|label2`, `multi\nline\nlabel1\\|label2`
chlps	Position and style of labels on data	`align,top\\|offset,10\\|color,FF00FF`, `align,top\\|offset,10\\|color,FF00FF`
chma	chart margins	`30,30,30,30`, `40,20`
chdlp	Position of the legend and order of the legend entries
chf	Background Fills	`b0,lg,0,f44336,0.3,03a9f4,0.8`
chbr	Bar corner radius. Display bars with rounded corner.	`5`, `10`
chan	gif configuration	`1200`, `1300\\|easeInOutSine`
chli	doughnut chart inside label	`95K€`, `45%`
icac	image-charts enterprise `account_id`	`accountId`
ichm	HMAC-SHA256 signature required to activate paid features	`0785cf22a0381c2e0239e27c126de4181f501d11…`
icff	Default font family for all text from Google Fonts. Use same syntax as Google Font CSS API	`Abel`, `Akronim`, `Alfa Slab One`
icfs	Default font style for all text	`normal`, `italic`
iclocale	localization (ISO 639-1)	`en`
icretina	retina mode	`1`
icqrb	Background color for QR Codes	`FFFFFF`
icqrf	Foreground color for QR Codes	`000000`

Since mjml-chart is a wrapper for mjml-image, mjml-image attributes are also available:

attribute	default values
alt	n/a
name	n/a
srcset	n/a
sizes	n/a
title	n/a
rel	n/a
align	center
border	0
border-bottom	n/a
border-left	n/a
border-right	n/a
border-top	n/a
border-radius	n/a
container-background-color	n/a
fluid-on-mobile	n/a
padding	10px 25px
padding-bottom	n/a
padding-left	n/a
padding-right	n/a
padding-top	n/a
max-height	n/a
font-size	13px
usemap	n/a

Note:

src attribute is not customizable, it's generated by mjml-chart
width and height are automatically generated by mjml-chart based on the chs attribute

Troubleshooting

Receiving Error: `Error when registering custom component`

If this warning appears in your log when you use mjml-chart, check your mjml version and be sure you have the last

lodash mjml-core mjml-image

@everything-registry/sub-chunk-2179 @infinitebrahmanuniverse/nolb-mj @zalastax/nolb-mj

4 days ago

11 days ago

18 days ago

17 days ago

20 days ago

21 days ago

25 days ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

mjml-chart for mjml

🎩 Usage

🚀 Setup

🚧 Documentation

Troubleshooting

Receiving Error: Error when registering custom component

Receiving Error: `Error when registering custom component`