mjml-chart

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, 1N*cUSD*Mil,FF0000, 1N*cEUR*,FF0000, 2,0000DD,13,0,t, 0N*p*per-month,0000FF, 0N*e*,000000|1N*cUSD*Mil,FF0000|2N*2sz*,…
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

Changelog

<small>6.1.203 (2024-03-17)</small>

• Release v6.1.203. (2c925d0)
• docs(changelog): updated (94cadd3)