markdown-it-apexcharts
ApexCharts plugin for markdown-it. DemoApp
Demo
DemoApp
DemoApp Github
Copy and paste ( ! remove back slashes infront of backtick (`) )
\`\`\`apex { "chart": { "type": "area" }, "series": [{ "name": "sales", "data": [30,40,45,50,49,60,70,91,125] }], "xaxis": { "type": "datetime", "categories": ["01/01/1991","01/01/1992","01/01/1993","01/01/1994","01/01/1995","01/01/1996","01/01/1997", "01/01/1998","01/01/1999"] } } \`\`\`
It should start with ```apex + JSON + ```
Installation
npm install markdown-it-apexcharts
Usage
const md = ; md; // below code creates <div class='apexcharts' data-options=INPUT_JSON></div> md; // important! // finds all div with class 'apexcharts' and render them based on JSON from their data-option attribute // if you are using react , call ApexRender() in componentDidMount() or UseEffect() // anyway it has to be called after div element is created ;
above code creates div element with class "apexcharts".
To render Apexcharts , you have to call render method ( ex: chart.render())
That is why I created ApexRender function to call render method for every div element with class 'apexcharts'
if you are using react , call ApexRender() in componentDidMount() or UseEffect()
anyway it has to be called after div element is created
### reference Inspired by markdown-it-mermaid by tylingsoft