mjml-chart

<mj-chart/> for MJML framework

Showing:

Popularity

Downloads/wk

162

GitHub Stars

58

Maintenance

Last Commit

8d ago

Contributors

7

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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-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
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
attributedescriptionvalue examples
chtChart typebvg, p
chdchart dataa:-100,200.5,75.55,110, t:10,20,30\|15,25,35, s:BTb19_,Mn5tzb, e:BaPoqM2s,-A__RMD6
chdsdata format with custom scaling-80,140
choeQRCode data encodingUTF-8
chldQRCode error correction level and optional marginL\|4, M\|10, Q\|5, H\|18
chxrAxis data-range0,0,200, 0,10,50,5, 0,0,500\|1,0,200
chofImage output format.png, .svg, .gif
chsChart size (x)400x400
chdlText for each series, to display in the legendNASDAQ\|FTSE100\|DOW
chdlsChart legend text and style9e9e9e,17
chgSolid or dotted grid lines1,1, 0,1,1,5, 1,1,FF00FF, 1,1,1,1,CECECE
chcoseries colorsFFC48C, FF0000,00FF00,0000FF
chttchart titleMy beautiful chart
chtschart title colors and font size00FF00,17
chxtDisplay values on your axis lines or change which axes are showny, x,y, x,x,y, x,y,t,r,t
chxlCustom string axis labels on any axis0:\|Jan\|July\|Jan, 0:\|Jan\|July\|Jan\|1\|10\|20\|30
chxsFont size, color for axis labels, both custom labels and default label values1,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*,…
chmcompound charts and line fills
chlsline thickness and solid/dashed style10, 3,6,3\|5
chlbar, pie slice, doughnut slice and polar slice chart labelslabel1\|label2, multi\nline\nlabel1\|label2
chlpsPosition and style of labels on dataalign,top\|offset,10\|color,FF00FF, align,top\|offset,10\|color,FF00FF
chmachart margins30,30,30,30, 40,20
chdlpPosition of the legend and order of the legend entries
chfBackground Fillsb0,lg,0,f44336,0.3,03a9f4,0.8
chbrBar corner radius. Display bars with rounded corner.5, 10
changif configuration1200, 1300\|easeInOutSine
chlidoughnut chart inside label95K€, 45%
icacimage-charts enterprise account_idaccountId
ichmHMAC-SHA256 signature required to activate paid features0785cf22a0381c2e0239e27c126de4181f501d11…
icffDefault font family for all text from Google Fonts. Use same syntax as Google Font CSS APIAbel, Akronim, Alfa Slab One
icfsDefault font style for all textnormal, italic
iclocalelocalization (ISO 639-1)en
icretinaretina mode1
icqrbBackground color for QR CodesFFFFFF
icqrfForeground color for QR Codes000000

Since mjml-chart is a wrapper for mjml-image, mjml-image attributes are also available:

attributedefault values
altn/a
namen/a
srcsetn/a
sizesn/a
titlen/a
reln/a
aligncenter
border0
border-bottomn/a
border-leftn/a
border-rightn/a
border-topn/a
border-radiusn/a
container-background-colorn/a
fluid-on-mobilen/a
padding10px 25px
padding-bottomn/a
padding-leftn/a
padding-rightn/a
padding-topn/a
max-heightn/a
font-size13px
usemapn/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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100