{"id":21879175,"url":"https://github.com/typpo/mjml-chartjs","last_synced_at":"2025-04-15T03:07:40.385Z","repository":{"id":37966751,"uuid":"506372413","full_name":"typpo/mjml-chartjs","owner":"typpo","description":"Embed charts in your emails with Chart.js and MJML","archived":false,"fork":false,"pushed_at":"2023-03-29T06:08:38.000Z","size":150,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-15T03:07:35.429Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/typpo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-22T19:01:22.000Z","updated_at":"2025-02-21T01:07:00.000Z","dependencies_parsed_at":"2022-08-29T05:31:16.342Z","dependency_job_id":null,"html_url":"https://github.com/typpo/mjml-chartjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fmjml-chartjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fmjml-chartjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fmjml-chartjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fmjml-chartjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typpo","download_url":"https://codeload.github.com/typpo/mjml-chartjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248997079,"owners_count":21195799,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T08:15:29.571Z","updated_at":"2025-04-15T03:07:40.362Z","avatar_url":"https://github.com/typpo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mjml-chartjs\n[![npm](https://img.shields.io/npm/v/mjml-chartjs)](https://www.npmjs.com/package/mjml-chartjs)\n[![Build Status](https://travis-ci.com/typpo/mjml-chartjs.svg?branch=main)](https://travis-ci.com/typpo/mjml-chartjs)\n\nAn MJML component for embedding Chart.js charts in email using the open-source [QuickChart](https://quickchart.io) renderer.\n\n## Usage\n\nThis mjml...\n\n```html\n\u003cmjml\u003e\n  \u003cmj-body\u003e\n    \u003cmj-section\u003e\n      \u003cmj-column\u003e\n        \u003cmj-chartjs chart=\"{\n          type: 'bar',\n          data: {\n            labels: ['Q1', 'Q2', 'Q3', 'Q4'],\n            datasets: [{\n              label: 'Users',\n              data: [50, 60, 70, 180],\n              backgroundColor: 'rgb(75, 192, 192)',\n            }]\n          }\n        }\n        \" /\u003e\n      \u003c/mj-column\u003e\n    \u003c/mj-section\u003e\n  \u003c/mj-body\u003e\n\u003c/mjml\u003e\n```\n\nWill show this chart:\n\n\u003cimg width=\"500\" alt=\"MJML rendered chart\" src=\"https://quickchart.io/chart?v=3\u0026c=%7B%0A%20%20type%3A%20%27bar%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%27Q1%27%2C%20%27Q2%27%2C%20%27Q3%27%2C%20%27Q4%27%5D%2C%0A%20%20%20%20datasets%3A%20%5B%7B%0A%20%20%20%20%20%20label%3A%20%27Users%27%2C%0A%20%20%20%20%20%20data%3A%20%5B50%2C%2060%2C%2070%2C%20180%5D%2C%0A%20%20%20%20%20%20backgroundColor%3A%20%27rgb(75%2C%20192%2C%20192)%27%2C%0A%20%20%20%20%7D%5D%0A%20%20%7D%0A%7D%0A\" /\u003e\n\nSet the image's background color, width, height, and more using the attributes below.\n\nTo learn more about building and customizing charts with Chart.js, refer to the [Chart.js documentation](https://www.chartjs.org/docs/latest/configuration/).\n\n## Setup\n\nInstall via npm:\n\n```\nnpm install mjml-chartjs --save\n```\n\nThen add the package to your `.mjmlconfig`:\n\n```\n{\n  \"packages\": [\n    \"mjml-chartjs/lib/MjChartjs.js\"\n  ]\n}\n```\n\n## Attributes\n\nThe `\u003cmj-chartjs\u003e` tag supports all the attributes of the `\u003cmj-image\u003e` tag.  View those attributes [here](https://documentation.mjml.io/#mj-image).\n\nIn addition to regular image attributes which you can using for sizing and positioning, the component supports the following chart-specific attributes:\n\n| Name             | Description                                               | Required? | Default       |\n|------------------|-----------------------------------------------------------|-----------|---------------|\n| chart            | The Chart.js configuration to be rendered                 | Yes       |               |\n| width            | The pixel width of the generated chart image              |           | 500px         |\n| height           | The pixel height of the generated chart image             |           | 300px         |\n| background-color | The background color of the generated chart image         |           | #fff          |\n| chartjs-version  | The version of Chart.js renderer to use                   |           | 3             |\n| host             | The host of the chart rendering server                    |           | quickchart.io |\n| scheme           | The scheme of the chart rendering server                  |           | https         |\n| ignore-url-limit | If set, ignore the 16kb URL length guideline              |           | false         |\n| api-key          | QuickChart.io API key (optional, for signing requests)    |           |               |\n| api-account      | QuickChart.io account ID (optional, for signing requests) |           |               |\n\n## Limitations\n\n### Large charts\n\nIf 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.\n\nThis 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.\n\nThe 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:\n- Is it possible to remove datapoints from the chart?  You probably don't need to show that level of detail.\n- 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\n\nIf 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.\n\n### No interactivity (animations or tooltips)\n\nThis 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.\n\n## Hosting\n\nBy 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyppo%2Fmjml-chartjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyppo%2Fmjml-chartjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyppo%2Fmjml-chartjs/lists"}