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.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-chart chs="300x200" chd="t:10,20,30|15,25,35" cht="bvs" chxt="x,y" chxl="0:|A|B|C" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

attribute	description	value examples
cht	chart type	bvg, p
chd	chart data	`t:10,20,30
chds	text format custom scaling	-80,140
chof	output fake format	.png
chs	chart size	400x400
chdl	text for each series, to display in the legend	`NASDAQ
chdls	chart legend text and style	9e9e9e,17
chg	grid lines	1,1, 0,1,1,5
chco	series colors	FFC48C, FF0000,00FF00,0000FF
chtt	chart title	My beautiful chart
chts	chart title colors and font size	00FF00,17
chxt	axis to apply labels to	y, x,y
chxl	custom axis labels	`0:
chm	line fills
chls	line thickness and solid/dashed style	10, `3,6,3
chl	pie chart labels	`label1
chf	Background Fills	b0,lg,0,f44336,0.3,03a9f4,0.8
chan	gif configuration	1200, `1300
chli	doughnut chart inside label	95K€, 45%
icac	image-charts enterprise account_id	accountId
ichm	HMAC-SHA256 signature	0785cf22a0381c2e0239e27c126de4181f501d11…

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

attribute	default values
align	center
alt	n/a
border	none
border-radius	n/a
container-background-color	n/a
padding-bottom	n/a
padding-left	n/a
padding-right	n/a
padding-top	n/a
padding	10px 25px
title	n/a
vertical-align	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