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