Nanometer Process Machine
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


    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

              <mj-chart chs="700x200" chd="s:theresadifferencebetweenknowingthepathandwalkingthepath" cht="bvs" chxt="y" chf="b0,lg,90,4CA4F5,0.1,C371D3,0.8,EA469E,1" />

    🚀 Setup
    npm install mjml-chart --save
    🚧 Documentation
    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
    align center
    alt n/a
    border none
    border-radius 0
    container-background-color n/a
    rel n/a
    padding-bottom n/a
    padding-left n/a
    padding-right n/a
    padding-top n/a
    padding 10px 25px
    srcset n/a
    title n/a
    vertical-align n/a


    • 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




    npm i mjml-chart

    Downloadslast 7 days







    last publish


    • avatar