{"id":28878444,"url":"https://github.com/uk2459644/editorjs-chartuk","last_synced_at":"2026-05-15T11:35:43.930Z","repository":{"id":155204530,"uuid":"428535529","full_name":"uk2459644/editorjs-chartuk","owner":"uk2459644","description":"Chart Block Tool for Editor.js, enables showing charts in EditorJs Markdown editor.","archived":false,"fork":false,"pushed_at":"2023-02-21T08:40:53.000Z","size":141,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-20T17:14:22.573Z","etag":null,"topics":["chart","chartjs","charts","editorjs","editorjs-plugin","javascript","opensource","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uk2459644.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-11-16T05:59:17.000Z","updated_at":"2025-02-26T08:43:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"64e3840e-e6fc-4970-a7f5-a68a85bd0859","html_url":"https://github.com/uk2459644/editorjs-chartuk","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/uk2459644/editorjs-chartuk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uk2459644%2Feditorjs-chartuk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uk2459644%2Feditorjs-chartuk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uk2459644%2Feditorjs-chartuk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uk2459644%2Feditorjs-chartuk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uk2459644","download_url":"https://codeload.github.com/uk2459644/editorjs-chartuk/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uk2459644%2Feditorjs-chartuk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33065663,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T11:35:32.926Z","status":"ssl_error","status_checked_at":"2026-05-15T11:35:31.362Z","response_time":103,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["chart","chartjs","charts","editorjs","editorjs-plugin","javascript","opensource","webpack"],"created_at":"2025-06-20T17:14:14.538Z","updated_at":"2026-05-15T11:35:43.925Z","avatar_url":"https://github.com/uk2459644.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chart\n\n![editorjs-chartuk](https://user-images.githubusercontent.com/75515703/220291240-838fbfac-a219-40c1-9174-942f8a31bc6c.gif)\n\n\nProvides Block tool for charts content for the Editor.js. Tool uses Editor.js pasted patterns handling and inserts various charts mentioned on chart.js based pasted data. Data pasted should be upto mark with chart.js data with relative chart type.\n\n## Installation\nInstall via npm \n```bash\nnpm install editorjs-chart \n```\nor via yarn\n```bash\nyarn add editorjs-chart\n```\nInclude module at your application\n\n```javascript\nimport Chart from 'editorjs-chart';\n```\n## Usage / Example \nAdd a new tool to the tools property of EditorJS's initial config\n\n```javascript\nvar editorjs=new EditorJS({\n...\n   tools:{\n          ...\n          chart:Chart\n         }\n...\n});\n```\n## Input dataset in format of JSON\n```javascript\n{\n    \"labels\": [\n      \"Red\",\n      \"Blue\",\n      \"Yellow\"\n    ],\n    \"datasets\": [{\n      \"label\": \"My First Dataset\",\n      \"data\": [300, 50, 100],\n      \"backgroundColor\": [\n        \"rgb(255, 99, 132)\",\n        \"rgb(54, 162, 235)\",\n        \"rgb(255, 205, 86)\"\n      ],\n      \"hoverOffset\": 4\n    }]\n  }\n\n```\n## Type of chart e.g. bar , pie , bubble, etc.\n\n## Output data\n\n```javascript\n{\n      \"id\": \"TOhD4DOCu4\",\n      \"data\": {\n        \"text\": \"{\\n  labels: [\\n    'Red',\\n    'Blue',\\n    'Yellow'\\n  ],\\n  datasets: [{\\n    label: 'My First Dataset',\\n    data: [300, 50, 100],\\n    backgroundColor: [\\n      'rgb(255, 99, 132)',\\n      'rgb(54, 162, 235)',\\n      'rgb(255, 205, 86)'\\n    ],\\n    hoverOffset: 4\\n  }]\\n}\",\n        \"caption\": \"pie\",\n        \"alignment\": \"center\"\n      },\n      \"type\": \"chart\"\n    }\n```\n\u003c\u003c\u003c\u003c\u003c\u003c\u003c HEAD\n## Data input sample \n\n```javascript\n {\n        \"labels\": [\"Red\", \"Blue\", \"Yellow\", \"Green\", \"Purple\", \"Orange\"],\n        \"datasets\": [{\n            \"label\": \"# of Votes\",\n            \"data\": [12, 19, 3, 5, 2, 3],\n            \"backgroundColor\": [\n                \"rgba(255, 99, 132, 0.2)\",\n                \"rgba(54, 162, 235, 0.2)\",\n                \"rgba(255, 206, 86, 0.2)\",\n                \"rgba(75, 192, 192, 0.2)\",\n                \"rgba(153, 102, 255, 0.2)\",\n                \"rgba(255, 159, 64, 0.2)\"\n            ],\n            \"borderColor\": [\n                \"rgba(255, 99, 132, 1)\",\n                \"rgba(54, 162, 235, 1)\",\n                \"rgba(255, 206, 86, 1)\",\n                \"rgba(75, 192, 192, 1)\",\n                \"rgba(153, 102, 255, 1)\",\n                \"rgba(255, 159, 64, 1)\"\n            ],\n            \"borderWidth\": 1\n        }]\n    }\n```\n=======\n\u003e\u003e\u003e\u003e\u003e\u003e\u003e 39b9331592b6b5c1ba2c32f96959ff63108d187f\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuk2459644%2Feditorjs-chartuk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuk2459644%2Feditorjs-chartuk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuk2459644%2Feditorjs-chartuk/lists"}