mjml-chart
Advanced tools
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-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>
npm install mjml-chart --save
| 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 |
Note:
src attribute is not customizable, it's generated by mjml-chartwidth and height are automatically generated by mjml-chart based on the chs attribute5.0.0 (2018-05-04)
FAQs
mjml-chart
The npm package mjml-chart receives a total of 438 weekly downloads. As such, mjml-chart popularity was classified as not popular.
We found that mjml-chart demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.