node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

mjml-chart

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

<mjml>
  <mj-body>
    <mj-container>
      <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-container>
  </mj-body>
</mjml>

🚀 Setup
npm install mjml-chart --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
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 axis to apply labels to y, 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
align center
alt n/a
border none
border-radius 0
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