image-charts/mjml-chart

<mj-chart/> for MJML framework

Charts, simple as a URL

No more server-side rendering pain, 1 url = 1 chart.

Documentation - Website

---

Image-charts is the easiest way to embed charts in email or chat bot.

No need to setup and develop a complex server-side solution. One url = one chart.

https://image-charts.com/chart
?cht=bvs
&chs=978x300
&chd=t:10,40,60,80,30,20
&chf=b0,lg,90,03a9f4,0,3f51b5,1
&chxt=x,y
&chan

Gifs in email = awesome

Communicate better with animated charts in your reporting emails. No more server-side rendering, headless browser tricks and painful email attachements.

https://image-charts.com/chart
?cht=pd
&chs=978x300
&chd=t:20,20,30,40,50
&chl=20°|20°|30°|40°|50°
&chan

Google Image Charts Drop-In replacement

Google Image Charts is deprecated since 2012, not supported since 2015 and can be shutdown anytime soon. Image-charts aims to be fully compatible with Google Charts API while still extending it. Don't build on unstable foundation.

https://image-charts.com/chart
?cht=bvs
&chd=s:theresadifferencebetweenknowingthepathandwalkingthepath
&chs=978x300
&chf=b0,lg,90,03a9f4,0,3f51b5,1
&chxt=x,y
&chan=1200,easeOutBack

Reliable and fast

<500ms everywhere around the world, 99,99% uptime over the past 3 months

---

Documentation - Website

mjml-chart's Issues

Not able to make it work... how to do it?

Hi,

I read the docs but haven't been able to make it work.

I installed it, I added the code to my mjml file ant then when trying to compile it it throws an error.

# Install mjml
npm init -y && npm install mjml
# Install  mjml-chart
npm install mjml-chart@5 --save
# run
mjml -w mail.mjml

I get the following error:

[ { line: 40,
    message: 'Element mj-chart doesn\'t exist or is not registered',
    tagName: 'mj-chart',
    formattedMessage:
     'Line 40 of {PATH}/mail.mjml (mj-chart) — Element mj-chart doesn\'t exist or is not registered' } ] 'Line 40 of {PATH}/mail.mjml (mj-chart) — Element mj-chart doesn\'t exist or is not registered'
{PATH}/

Am I missing something else to install?

Error when registering custom component with latest

Installed pointed to js file and getting this error

user@MBP mjml % mjml --version
Error when registering custom component :  /opt/homebrew/lib/node_modules/mjml-chart/lib/index.js TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at registerCustomComponent (/opt/homebrew/lib/node_modules/mjml-chart/node_modules/mjml-core/lib/helpers/mjmlconfig.js:84:30)
    at /opt/homebrew/lib/node_modules/mjml-chart/node_modules/mjml-core/lib/helpers/mjmlconfig.js:87:7
    at Array.forEach (<anonymous>)
    at registerCustomComponent (/opt/homebrew/lib/node_modules/mjml-chart/node_modules/mjml-core/lib/helpers/mjmlconfig.js:86:15)
    at /opt/homebrew/lib/node_modules/mjml-chart/node_modules/mjml-core/lib/helpers/mjmlconfig.js:107:9
    at Array.forEach (<anonymous>)
    at handleMjmlConfigComponents (/opt/homebrew/lib/node_modules/mjml-chart/node_modules/mjml-core/lib/helpers/mjmlconfig.js:97:12)
    at handleMjmlConfig (/opt/homebrew/lib/node_modules/mjml-chart/node_modules/mjml-core/lib/helpers/mjmlconfig.js:139:10)
    at Object.<anonymous> (/opt/homebrew/lib/node_modules/mjml-chart/node_modules/mjml-core/lib/index.js:473:27)
mjml-core: 4.10.4
mjml-cli: 4.10.4

mjml-core: 4.10.4
mjml-cli: 4.10.4
mjml-chart: 6.0.1

No way to format numbers or dates using chxs

As the title says, there is currently no way to format numbers or dates (see here).

Update mjml-chart to use mjml 4

Hello @FGRibreau ! I'm working on migrating mjml-chart to use mjml 4. I was hoping it would be pretty easy but I'm stuck at the moment:

Here’s a log of everything I've done so far to migrate mjml-chart to mjml 4.

1. Fork and clone repo.

2. Install dependences with npm i - no issues (as long as you're using node v8.10.0)

3. Tested everything by running npm test - all tests pass

4. Update mjml-core and mjml-image to v4.0.5. Then run npm test

   • This produces an error stating that:
     (TypeError: (0 , _mjmlCore.MJMLElement) is not a function
     So next thing I did was look at mjml-core to see what changed. Based on how they create components in MJML v4 (here's an example, it looks like they use a class called 'BodyComponent' instead of 'MJMLElement'.

5. Edit scripts/templates/component.js.tmpl and lib/index.js to use 'BodyComponent'

   • Here are the lines I changed:

   //Inside component.js.tmpl
   import {
     BodyComponent
   } from 'mjml-core'
   extends BodyComponent {
   
   //Inside index.js
   var Chart = (0, _mjmlCore.BodyComponent)(_class = function (_Component) {

6. Run npm test again. Still get the same error. This time it's coming from the file in src/index.js, which you say not to edit directly because it's generated with npm run update. From this comment, I would assume I can run npm run update but there is no script in the package.json. However, there is a script called "generate" which looks like will generate a new file of the component which may fix the test.

7. Run npm run generate then run npm test. This is looking better. There is a DeprecationWarning from Mocha. Following the link, we learn that we can add --no-deprecation too remove this warning. So add that to the following scripts:

   • "test"
   • "test-watch"

8. Run npm test again. 0 tests past. We see this error: TypeError: (0 , _mjmlCore.registerMJElement) is not a function - looks like this was changed in v4. Based on the current version, looks like this method changed to registerComponent so chagne that inside test/mjml-chart.spec.js

9. Run npm test. Now we see 0/5 tests passing. The common error is _mjmlCore.MJMLRenderer is not a constructor. Looking at the current version, I believe this has been moved into a separate package called [mjml-validator`](https://www.npmjs.com/package/mjml-validator) so I install that as a dev-dependency.

10. Run npm test again. Now the error we get is:

TypeError: Cannot read property 'undefined' of undefined
   at validateAttribute (node_modules/mjml-validator/lib/rules/validAttributes.js:38:29)

My guess is that it is trying to validate the attributes for mjml-chart but doesn't know where to look
for the list of valid attributes? I'm a little stuck here. Not sure where to debug or how to solve this.

TypeError when parsing mjml-chart

Hi devs,

I get the error:

TypeError: component.getTagName is not a function
    at ~/node_modules/mjml-parser-xml/lib/index.js:60:141
    at ~/node_modules/lodash/fp/_baseConvert.js:34:28
    at arrayMap (~/node_modules/lodash/_arrayMap.js:16:21)
    at map (~/node_modules/lodash/map.js:50:10)
    at wrapper (~/node_modules/lodash/_createHybrid.js:87:15)
    at ~/node_modules/lodash/fp/_baseConvert.js:455:19
    at wrapper (~/node_modules/lodash/_createHybrid.js:87:15)
    at ~/node_modules/lodash/_createFlow.js:71:31
    at MJMLParser (~/node_modules/mjml-parser-xml/lib/index.js:60:155)
    at mjml2html (~/node_modules/mjml-core/lib/index.js:219:39)

When adding the mj-chart tag to my mjml file. It happened just after adding the .mjmlconfig file, before that the chart was not showing on the emails.

If you guys need anything else from me let me know.

Thanks

mjml v4.10.1
mjml-chart v4

Receiving Error: `Error when registering custom component`

Error when registering custom component : node_modules/mjml-chart/lib/index.js TypeError: Cannot read property 'BodyComponent' of undefined
    at Object.get [as BodyComponent] (node_modules/mjml-core/lib/index.js:50:29)

This seems to happen on initialization, even those the component seems to work properly and the chart is embedded, so I'm not sure if this error is causing any errant behavior but it's noisy in the console.

System Info:
node 10.17.0
mjml 4.6.3
mjml-chart 5.3.2

MacOS Mojave

MJML Error: Element mj-chart doesn't exist or is not registered.

Upon inspection of my local npm modules I can see that mjml-chart/ib/index.js is empty. Seems that the build script is failing in CI? Possibly resolvable within ci.sh file but I am at a loss trying to understand what is going on in there tbh. Any pointers? For now will try downgrading versions.