Highcharts test tool

by Alexandre Froger

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
chart: {
						alignTicks: false,
            zoomType: 'xy',
            height: 600,
                    },
        title: {
            text: '<span style="font-family:MuseoSlab500;line-height:1.1em;">Record de matches en Premier League en tant qu’entraîneur</span>',
            align: 'left',
            margin: 30,
            style: {
                fontSize: '25px',
                color: '#000000' 
            }
        },
        subtitle: {
            text: 'Seul Alex Ferguson a dirigé plus de matches de Premier League que Wenger',
            align: 'left',
            style: {
                fontSize: '16px'
            }
         },
        xAxis: {
            categories: ['Alex Ferguson','Arsène Wenger','Harry Redknapp','Sam Allardyce','David Moyes','Steve Bruce','Mark Hughes','Martin O\'Neill','Alan Curbishley','Joe Kinnear'],
            title: {
                text: ''
            },
            labels: {
                enabled: true,
                step: 1,
                rotation: -46            }
        },
        yAxis: [{
        	labels: {
          	format: '{value} ',
            style:{color: Highcharts.getOptions().colors[0]}
          },
          title: {
          	text: 'Matches',
            style:{color: Highcharts.getOptions().colors[0]}
          }
       	},{
        	gridLineWidth: 0,
        	opposite: true,
          labels: {
          	format: '{value} %',
            style:{color: "#a3a6a5"}
          	},
            title: {
            	text: '% Victoires',
              style:{color: "#a3a6a5"}
            }
        }],
        plotOptions: {
            series: {
                animation: {
                    duration: 400,
                }
            }
        },
        tooltip: {
            shared : true,
            pointFormat: '{series.name}</span> : <b> {point.y}</b> <br/>'
        },
        legend: {	
            enabled: true,
            layout: 'horizontal',
  ...