editorjs-chart
v1.0.3
Published
editorjs chart js usage
Downloads
19
Readme
Chart
Provides 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.
Installation
Install via npm
npm install editorjs-chart
or via yarn
yarn add editorjs-chart
Include module at your application
import Chart from 'editorjs-chart';
Usage / Example
Add a new tool to the tools property of EditorJS's initial config
var editorjs=new EditorJS({
...
tools:{
...
chart:Chart
}
...
});
Input dataset in format of JSON
{
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [{
"label": "My First Dataset",
"data": [300, 50, 100],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
"rgb(255, 205, 86)"
],
"hoverOffset": 4
}]
}
Type of chart e.g. bar , pie , bubble, etc.
Output data
{
"id": "TOhD4DOCu4",
"data": {
"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}",
"caption": "pie",
"alignment": "center"
},
"type": "chart"
}
<<<<<<< HEAD
Data input sample
{
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}]
}
=======
39b9331592b6b5c1ba2c32f96959ff63108d187f