markdown-it-responsive-echarts

markdown-it-responsive-echarts enhances your Markdown capabilities by instantiating interactive and responsive ECharts that can react to light mode and dark mode.

Install the plugin with

npm install markdown-it-responsive-echarts

and add it to your markdown-it setup

import markdownItECharts from 'markdown-it-responsive-echarts'
import markdownIt from 'markdown-it'

const md = markdownIt()
md.use(markdownItECharts)

to render charts like the one below.

Visit the plugin page to learn about the configuration options.

The above chart is generated by putting the below chart definition into a fenced code block inside of your Markdown text. The fenced code block must be introduced by the identifier echarts.

 Note

It is mandatory to create an object named config that holds your chart definition. You cannot choose a different name!

```echarts
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
  xAxisData.push('A' + i);
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
}
//your chart definition must be stored in an object named config
//you cannot choose a different name
const config = {
  figcaption: "An EChart rendered with markdown-it-interactive-echarts. The chart definition is taken from the ECharts example titled <a href='https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay'><cite>Bar Animation Delay</cite></a>.",
  title: {
    text: 'Bar Animation Delay'
  },
  legend: {
    data: ['bar', 'bar2']
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    splitLine: {
      show: false
    }
  },
  yAxis: {},
  series: [
    {
      name: 'bar',
      type: 'bar',
      data: data1,
      emphasis: {
        focus: 'series'
      },
      animationDelay: function (idx) {
        return idx * 10;
      }
    },
    {
      name: 'bar2',
      type: 'bar',
      data: data2,
      emphasis: {
        focus: 'series'
      },
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }
  ],
  animationEasing: 'elasticOut',
  animationDelayUpdate: function (idx) {
    return idx * 5;
  }
};
```