<mj-chart/> for MJML framework
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


mjml-chart for mjml

Build Status Coveralls branch Deps NPM version Downloads extra

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

🎩 Usage

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

🚀 Setup
  • mjml-chart v5.x.x is built for MJML4:
npm install mjml-chart@5 --save
  • 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 t:10,20,30|15,25,35
chds text format custom scaling -80,140
chxr axis range 0,0,200, 0,10,50,5, 0,0,500|1,0,200
chof output fake format .png
chs chart size 400x400
chdl text for each series, to display in the legend NASDAQ|FTSE100|DOW
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 visible axes y, x,y, x,x,y
chxl custom axis labels 0:|Jan|July|Jan, 0:|Jan|July|Jan|1|10|20|30
chm line fills
chls line thickness and solid/dashed style 10, 3,6,3|5
chl pie chart labels label1|label2
chma chart margins 30,30,30,30, 40,20
chf Background Fills b0,lg,0,f44336,0.3,03a9f4,0.8
chan gif configuration 1200, 1300|easeInOutSine
chli doughnut chart inside label 95K€, 45%
icac image-charts enterprise account_id accountId
ichm HMAC-SHA256 signature 0785cf22a0381c2e0239e27c126de4181f501d11…
icwt Force watermark display even if the chart was signed with an enterprise account 0, 1

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

attribute default values
alt n/a
srcset n/a
title 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
padding 10px 25px
padding-bottom n/a
padding-left n/a
padding-right n/a
padding-top n/a


  • 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