https://github.com/typpo/mjml-chartjs
Embed charts in your emails with Chart.js and MJML
https://github.com/typpo/mjml-chartjs
Last synced: about 1 year ago
JSON representation
Embed charts in your emails with Chart.js and MJML
- Host: GitHub
- URL: https://github.com/typpo/mjml-chartjs
- Owner: typpo
- License: mit
- Created: 2022-06-22T19:01:22.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-29T06:08:38.000Z (about 3 years ago)
- Last Synced: 2025-04-15T03:07:35.429Z (about 1 year ago)
- Language: JavaScript
- Size: 146 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mjml-chartjs
[](https://www.npmjs.com/package/mjml-chartjs)
[](https://travis-ci.com/typpo/mjml-chartjs)
An MJML component for embedding Chart.js charts in email using the open-source [QuickChart](https://quickchart.io) renderer.
## Usage
This mjml...
```html
```
Will show this chart:
%27%2C%0A%20%20%20%20%7D%5D%0A%20%20%7D%0A%7D%0A)
Set the image's background color, width, height, and more using the attributes below.
To learn more about building and customizing charts with Chart.js, refer to the [Chart.js documentation](https://www.chartjs.org/docs/latest/configuration/).
## Setup
Install via npm:
```
npm install mjml-chartjs --save
```
Then add the package to your `.mjmlconfig`:
```
{
"packages": [
"mjml-chartjs/lib/MjChartjs.js"
]
}
```
## Attributes
The `` tag supports all the attributes of the `` tag. View those attributes [here](https://documentation.mjml.io/#mj-image).
In addition to regular image attributes which you can using for sizing and positioning, the component supports the following chart-specific attributes:
| Name | Description | Required? | Default |
|------------------|-----------------------------------------------------------|-----------|---------------|
| chart | The Chart.js configuration to be rendered | Yes | |
| width | The pixel width of the generated chart image | | 500px |
| height | The pixel height of the generated chart image | | 300px |
| background-color | The background color of the generated chart image | | #fff |
| chartjs-version | The version of Chart.js renderer to use | | 3 |
| host | The host of the chart rendering server | | quickchart.io |
| scheme | The scheme of the chart rendering server | | https |
| ignore-url-limit | If set, ignore the 16kb URL length guideline | | false |
| api-key | QuickChart.io API key (optional, for signing requests) | | |
| api-account | QuickChart.io account ID (optional, for signing requests) | | |
## Limitations
### Large charts
If you have a very large chart config, it may not fit into an image tag! Browsers and web servers limit the max length of URLs. This plugin works by fully encoding the chart image into the image URL.
This plugin will throw an error if your URL length exceeds 16kb. You can override this behavior by setting the `ignore-url-limit` attribute on your `mj-chartjs` tag.
The good news is that you should almost never need to send a URL that long. If the chart URL is too long, consider the following:
- Is it possible to remove datapoints from the chart? You probably don't need to show that level of detail.
- Can you reduce the precision of your chart values? The user probably won't be able to see the difference between 1.0 and 1.000000025
If you decide that you want to send a large data payload anyways, consider pre-registering the charts as [short URLs](https://quickchart.io/documentation/usage/short-urls-and-templates/) and then sending the shortened URLs in a regular `mj-image` tag.
### No interactivity (animations or tooltips)
This package works by rendering your Chart.js chart as an image. This means it is not psosible to retain interactive chart features such as animations or tooltips.
## Hosting
By default, this component uses the public [QuickChart](https://quickchart.io) web service to render charts, but you can use the `host` attribute to point to your own chart renderer.