Highcharts Demo

author(s): Torstein Hønsi

by ninachroscicka

HTML

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

<div class = 'containter'>
  <div id="container-1"></div>
  <div id="container-2"></div>
</div>

CSS

.container {
    width: 500px;
    height:400px;
    margin: auto;
    position:absolute;
}

#container-1 {
    float: left;
    height: 400px;
    width: 300px;
    position:absoulte;
}

#container-2 {
    float: right;
    height: 400px;
    width: 300px;
    position:absoulte;
}

JavaScript

Highcharts.chart('container-1', {
    chart: {
        type: 'pie'
    },

    title: {
        text: ' '
    },

   plotOptions: {
	        pie: {
	            innerSize: '95%',
              dataLabels: {
                  enabled: true,
                  format: '{point.percentage:.1f} %',
                  connectorColor: 'transparent',
                  style: {
          				fontSize:'13px',
            			fontFamily : 'Helvetica',
                  fontWeight:200
          			}
              }
	        }
	    },

    series:  [{
	        data: [
        {
            name: 'Negatywny',
            y: 72,
            color: '#f6bf26'
        }, {
            name: 'Neutralny',
            y: 28,
            color: '#E7E7E7'
        }],
            borderWidth: 12,
            borderColor: null
	    }]
});


Highcharts.chart('container-2', {
    chart: {
        type: 'pie'
    },

    title: {
        text: ' '
    },

     plotOptions: {
	        pie: {
	            innerSize: '95%',
              dataLabels: {
                  enabled: true,
                  format: '{point.percentage:.1f} %',
                  connectorColor: 'transparent',
                  style: {
          				fontSize:'13px',
            			fontFamily : 'Helvetica',
                  fontWeight:200
          			}
              }
	        }
	    },

    series: [{
	        data: [
        {
            name: 'Negatywny',
            y: 28,
            color: '#004b75'
        }, {
            name: 'Neutralny',
            y: 72,
            color: '#E7E7E7'
        }],
            borderWidth: 12,
            borderColor: null
	    }]
});