Bar chart - with overflow and scroll

author(s): Alon Schachter

by sectioni

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>
<a href="#" onclick="alert('not implemented');">See full chart</a>

<hr/>
<br/>
<input type="button" value="up" onclick="up()"/>
<br/>
<input type="button" value="down" onclick="down()"/>

CSS

html, body {
  height:100%;
}

.highcharts-figure {
   height:40%;
   overflow:hidden;
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 800px;
    margin: 1em auto;

    border:solid 1px black;
}

JavaScript

function up() {
   $('.highcharts-figure').scrollTop($('.highcharts-figure').scrollTop() - 30);
}

function down() {
   $('.highcharts-figure').scrollTop($('.highcharts-figure').scrollTop() + 30);
}






var chart = new Highcharts.chart('container', {
                chart: {
                    type: 'bar',
                    reflow: true,                        
                    marginTop: 0,
                    spacingTop: 0,
                    spacingRight:0,
                    marginRight:0
                    
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: '',
                    x: 0
                },
                yAxis: {
                    visible: false
                },
                xAxis: {                
                    categories: ["Category 1", "asdasd2", "asdasd3", "asdasd4"],
                    labels: {                    
                    useHTML: false,
                        style: {
                            fontSize: "16px",
                            color: "red"
                        },
                        y: 5                    

                    },
                    minPadding:0,
                    maxPadding:0

                },
                tooltip: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        pointWidth: 5,                        
                        groupPadding: 0,                        
                        dataLabels: {
                        	enabled: false,
                            style: {                            
                                fontSize: "32px",
                                color: "red"
                            }
                        }
                    }
        ...