Giter VIP home page Giter VIP logo

markdown-it-apexcharts's Introduction

markdown-it-apexcharts

ApexCharts plugin for markdown-it. _DEMO

Demo

_DEMO

It should start with ```apex + JSON + ```

Installation

npm install markdown-it-apexcharts

Usage

    import markdownIt from 'markdown-it'
    import markdownItApexCharts , {Apexrender} from 'markdown-it-apexcharts'
    
    const md = markdownIt();
    md.use(markdownItMermaid);
    // below code creates <div class='apexcharts' data-options=INPUT_JSON></div>
    md.render(`\`\`\`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"]
         }
    }   
    \`\`\``);
    
    // 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
    ApexRender();

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

markdown-it-apexcharts's People

Contributors

smarthug avatar tylerlong avatar liradb2000 avatar

Stargazers

 avatar  avatar  avatar Ming avatar  avatar Juned Chhipa avatar  avatar

Watchers

James Cloos avatar  avatar

Forkers

liradb2000

markdown-it-apexcharts's Issues

String Values don't allow for spaces

Example JSON:

{
  "chart": {
    "type": "radar"
  },
  "series": [{
    "name": "Series 1",
    "data": [80,50,30,40,100,20]
  }],
  "title": {
    "text": "Basic Radar Chart"
  },
  "xaxis": {
    "categories": ["January","February","March","April","May","June"]
  }
}

Because each of these strings has a space between the quotes, it disrupts how the data is stored in the data attribute:

  • Series 1
  • Basic Radar Chart

HTML when there's no spaces:

<div type="apexChart" data-options="{&quot;chart&quot;:{&quot;type&quot;:&quot;radar&quot;},&quot;series&quot;:[{&quot;name&quot;:&quot;Series1&quot;,&quot;data&quot;:[80,50,30,40,100,20]}],&quot;title&quot;:{&quot;text&quot;:&quot;BasicRadarChart&quot;},&quot;xaxis&quot;:{&quot;categories&quot;:[&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;]}}" id="Apex801" style="min-height: 715px;">

versus HTML when there's spaces:

<div type="apexChart" data-options="{&quot;chart&quot;:{&quot;type&quot;:&quot;radar&quot;},&quot;series&quot;:[{&quot;name&quot;:&quot;Series" 1","data":[80,50,30,40,100,20]}],"title":{"text":"basic="" radar="" chart"},"xaxis":{"categories":["january","february","march","april","may","june"]}}="" id="Apex621">

It may help use use encodeURIComponent() on the JSON before storing it in the data attribute. Then using decodeURIComponent() when extracting the data attribute.

Though, based on the &quot;, those functions may already be in use.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.