Highcharts Demo

author(s): Torstein Hønsi

by core972

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="display:inline-block;min-width: 510px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div id="container2" style="display:inline-block;min-width: 510px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div class="line top"></div>
<div class="line bottom"></div>

CSS

.line {
  position: absolute;
  width: 800px;
  height: 2px;
  background-color: red;
  left: 50px;
}

.top {
  top: 75px;
}

.bottom {
  top: 340px;
}

JavaScript

// Build the charts

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        spacingTop:15,
        spacingBottom:0
    },
    title: {
        text: 'Title 1'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [
        	{
              name: 'Chrome',
              y: 61.41,
          }, {
              name: 'Internet Explorer',
              y: 11.84
          }, {
              name: 'Firefox',
              y: 10.85
          }, {
              name: 'Edge',
              y: 4.67
          }, {
              name: 'Safari',
              y: 4.18
          }, {
              name: 'Other',
              y: 7.05
          }
        ]
    }]
});
Highcharts.chart('container2', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        spacingTop:15,
        spacingBottom:18
    },
    title: {
        text: 'title 2'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Chrome',
            y: 61.41,
        }, {
            name: 'Firefox',
            y: 40.85
        }]
    }]
});