Echarts

Chart js is loaded with powerful features to fulfill your data-visualization needs. Look at some of the key features of echarts. For more details

Direct <script> include

directly include it in your html

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">
HTML Code
 <div id="echart-bar" class="custom-chart" ></div>
Script
let echartBarElement = document.getElementById('echart-bar');
    if (echartBarElement) {
        let echartBar = echarts.init(echartBarElement);
        let option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                itemStyle: {
                    color: 'rgba(8, 155, 171, 1)',
                }
            }]
        };

        echartBar.setOption(option);
        window.addEventListener('resize', function () {
            echartBar.resize();
        });
    }
Previous Next