mjml-chart

mjml-chart for mjml

     !extra

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

#### 🎩 Usage

``xml









`

##### 🚀 Setup


- mjml-chart v5.x.x is built for MJML4 (Community components):

`bash
npm install mjml-chart@5 --save

cat < .mjmlconfig
{
"packages": [
"mjml-chart/lib/index.js"
]
}
EOF
`

- mjml-chart v4.x.x is built for MJML3:

`bash
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, 1NcUSDMil,FF0000, 1NcEUR,FF0000, 2,0000DD,13,0,t, 0Npper-month,0000FF, 0Ne,000000\|1NcUSDMil,FF0000\|2N2sz,… |
| 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

$3

If this warning appears in your log when you use mjml-chart, check your mjml` version and be sure you have the last