search

image-charts / mjml-chart

<mj-chart/> for MJML framework
https://image-charts.com
78 stars 4 forks source link
chart-image email-chart email-charts google-image-charts mjml

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
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:

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