demo/demo-chart-viewOnly.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DEMO</title>
    <script src="../lib/markdown-it/dist/markdown-it.js"></script>
    <script src="../lib/toMark/dist/toMark.js"></script>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/tui-color-picker/dist/tui-color-picker.js"></script>
    <script src="../lib/codemirror/lib/codemirror.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/squire-rte/build/squire-raw.js"></script>
    <script src="../lib/plantuml-encoder/dist/plantuml-encoder.js"></script>
    <script src="../lib/raphael/raphael.min.js"></script>
    <script src="../lib/tui-chart/dist/chart.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="../dist/tui-editor.css">
    <link rel="stylesheet" href="../dist/tui-editor-contents.css">
    <link rel="stylesheet" href="../lib/tui-color-picker/dist/tui-color-picker.css">
    <link rel="stylesheet" href="../lib/tui-chart/dist/chart.css">
    <style type="text/css">
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        #editSection {
            padding: 15px;
            padding-top: 35px;
        }
    </style>
</head>
<body>
<div id="editSection"></div>
<script src="../dist/tui-editor-ViewOnly.js"></script>
<script src="../dist/tui-editor-extChart.js"></script>
<script>
    var content = [
        '```chart',
        ',category1,category2',
        'Jan,21,23',
        'Feb,31,17',
        '',
        'type: column',
        'width: 700',
        'height: 300',
        'title: Monthly Revenue',
        'x.title: Amount',
        'y.title: Month',
        'y.min: 1',
        'y.max: 40',
        'y.suffix: $'
    ].join('\n');
    $('#editSection').tuiEditorViewOnly({
        previewStyle: 'vertical',
        height: '100%',
        initialValue: content,
        exts: ['chart']
    });
</script>
</body>
</html>