mjml-chart

    5.6.140 • Public • Published

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

    • 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

    Keywords

    none

    Install

    npm i mjml-chart

    DownloadsWeekly Downloads

    366

    Version

    5.6.140

    License

    MIT

    Unpacked Size

    526 kB

    Total Files

    25

    Last publish

    Collaborators

    • fgribreau
    • image-charts