src/js/extensions/chart/chart.js
function chartReplacer(codeBlockChartDataAndOptions, extensionOptions) {
  const randomId = `chart-${Math.random().toString(36).substr(2, 10)}`;
  let renderedHTML = `<div id="${randomId}" class="chart" />`;

  setTimeout(() => {
    const chartContainer = document.querySelector(`#${randomId}`);
    try {
      parseCode2DataAndOptions(codeBlockChartDataAndOptions, ({data, options: chartOptions}) => {
        chartOptions = setDefaultOptions(chartOptions, extensionOptions, chartContainer);

        const chartType = chartOptions.editorChart.type;
        if (SUPPORTED_CHART_TYPES.indexOf(chartType) < 0) {
          chartContainer.innerHTML = `invalid chart type. type: bar, column, line, area, pie`;
        } else if (CATEGORY_CHART_TYPES.indexOf(chartType) > -1 &&
                    data.categories.length !== data.series[0].data.length) {
          chartContainer.innerHTML = 'invalid chart data';
        } else {
          chart[chartType](chartContainer, data, chartOptions);
        }
      });
    } catch (e) {
      chartContainer.innerHTML = 'invalid chart data';
    }
  }, 0);

  return renderedHTML;
}
function chartReplacer(codeBlockChartDataAndOptions, extensionOptions) {
  const randomId = `chart-${Math.random().toString(36).substr(2, 10)}`;
  let renderedHTML = `<div id="${randomId}" class="chart" />`;

  setTimeout(() => {
    const chartContainer = document.querySelector(`#${randomId}`);
    try {
      parseCode2DataAndOptions(codeBlockChartDataAndOptions, ({data, options: chartOptions}) => {
        chartOptions = setDefaultOptions(chartOptions, extensionOptions, chartContainer);

        const chartType = chartOptions.editorChart.type;
        if (SUPPORTED_CHART_TYPES.indexOf(chartType) < 0) {
          chartContainer.innerHTML = `invalid chart type. type: bar, column, line, area, pie`;
        } else if (CATEGORY_CHART_TYPES.indexOf(chartType) > -1 &&
                    data.categories.length !== data.series[0].data.length) {
          chartContainer.innerHTML = 'invalid chart data';
        } else {
          chart[chartType](chartContainer, data, chartOptions);
        }
      });
    } catch (e) {
      chartContainer.innerHTML = 'invalid chart data';
    }
  }, 0);

  return renderedHTML;
}
function chartReplacer ( codeBlockChartDataAndOptions , extensionOptions ) { const randomId = ` ${ Math . random ( ) . toString ( 36 ) . substr ( 2 , 10 ) } ` ; let renderedHTML = ` ${ randomId } ` ; setTimeout ( ( ) => { const chartContainer = document . querySelector ( ` ${ randomId } ` ) ; try { parseCode2DataAndOptions ( codeBlockChartDataAndOptions , ( { data , options : chartOptions } ) => { chartOptions = setDefaultOptions ( chartOptions , extensionOptions , chartContainer ) ; const chartType = chartOptions . editorChart . type ; if ( SUPPORTED_CHART_TYPES . indexOf ( chartType ) < 0 ) { chartContainer . innerHTML = ` ` ; } else if ( CATEGORY_CHART_TYPES . indexOf ( chartType ) > - 1 && data . categories . length !== data . series [ 0 ] . data . length ) { chartContainer . innerHTML = 'invalid chart data' ; } else { chart [ chartType ] ( chartContainer , data , chartOptions ) ; } } ) ; } catch ( e ) { chartContainer . innerHTML = 'invalid chart data' ; } } , 0 ) ; return renderedHTML ; }
replace html from chart data
@param {string} codeBlockChartDataAndOptions - chart data text
@param {Object} extensionOptions - chart extension options
@returns {string} - rendered html
@ignore
replace html from chart data