charts

by Jason Rose

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
http://api.highcharts.com/highcharts/tooltip.animation<br><br>
<!-- <div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div> -->
<div id="container" style="margin: auto; min-width: 310px; max-width: 900px"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        credits: {
					enabled: false
				},lang: {
            noData: "No data to display"
        },
        noData: {
            style: {
                fontWeight: 'bold',
                fontSize: '15px',
                color: '#303030'
            }
        },
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Office 365 Mailbox Usage Report',
            style: {
                color: '#7CB5EC',
                fontWeight: 'bold',
                fontSize: '26px',
            }
        },
        subtitle: {
            text: 'Customer Name - January 2016',
            style: {
                color: '#91a1ab',
                fontWeight: 'bold',
                fontSize: '18px',
            }
        },
        // ReportDay
        xAxis: [{
            categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
            title: {
            	text: 'Day of Month'
            }
        }],
        yAxis: [{ // Primary yAxis
            
            min: 0,
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
           ...