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-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>
mjml-chartv5.x.x is built for MJML4 (Community components):
npm install mjml-chart@5 --save
cat <<EOF > .mjmlconfig
{
"packages": [
"mjml-chart/lib/index.js"
]
}
EOFmjml-chartv4.x.x is built for MJML3:
npm install mjml-chart@4 --save| 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:
srcattribute is not customizable, it's generated bymjml-chartwidthandheightare automatically generated bymjml-chartbased on thechsattribute
If this warning appears in your log when you use mjml-chart, check your mjml version and be sure you have the last