jQuery custom content scroller

http://manos.malihu.gr/jquery-custom-content-scroller/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.min.css">
<!--<div class="mCustomScrollbar" data-mcs-theme="dark">
 your content
</div> -->
<script>
    function addContent() {
        $("#mCSB_1_container").html($("#mCSB_1_container").html() + "<b> New Content</b>");
    }
</script>
<button onclick="addContent()">Add Content</button>
<div id="content" style="margin-top:50px;height:200px;width:500px;overflow:auto">
  <div id="barchartstacked_1" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
</div>

JavaScript

$(document).ready(function () {
    $("#content").mCustomScrollbar({
        axis: 'xy',
        advanced: {
            updateOnContentResize: true
        },
        theme: 'rounded-dots-dark'
    });
});

    

$(function () {
        $('#barchartstacked_1').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: false
            },
            xAxis: {
                categories: ['1月', '2月', '3月' , '4月' , '5月' , '6月' , '7月' , '8月' , '9月' , '10月', '11月','12月']
            },
            yAxis: {
                min: 0,
                
            },
            legend: {
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            series: [
            {
                name: 'customer',
                data: [2, 2, 3, 5 ,7,8,4,6,8,9,8,4]
            }, {
                name: 'Datang',
                data: [2, 2, 4, 6, 7, 8 ,6,7,3,4,5,9]
            }
            ]
        });
    });