Pie with legend

author(s): Torstein Hønsi

by sectioni

HTML

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


<figure class="highcharts-figure">
    <div id="container" style="width:200px;"></div>
    <p class="highcharts-description">
        This pie chart shows how the chart legend can be used to provide
        information about the individual slices.
    </p>
</figure>

CSS

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

// Build the chart
Highcharts.chart('container', {
    chart: {
      type: 'column',
      zoomType: 'x'
    },

    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    legend: {
    	maxHeight:50
		},
    xAxis: {
    
      type: 'category',
      labels: {
        rotation: -45,
        style: {
          'fontSize': '12px',
          'fontFamily': 'Arial'
        },
        step: 1,
        useHTML:true,

      }
    
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: false,
          shadow: false,
          style: {
            fontSize: '10px',
            color: 'contrast',
            textOutline: '0',
            fontWeight: 'normal'
          }
        }
      },
      series: {
        dataLabels: {
          enabled: false
        },   
        animation: {
          duration: 3000,
          easing: 'easeOutBounce'
        }
      }
   },
    series: [{"name":"Info","color":"#1272B2","data":[{"name":"111 abc222 (AKO - SITE:1201162)","y":259}]},{"name":"Warning","color":"#F5A624","data":[{"name":"111 abc222 (AKO - SITE:1201162)","y":360}]},{"name":"Error","color":"#F1801E","data":[{"name":"111 abc222 (AKO - SITE:1201162)","y":260}]},{"name":"Critical","color":"#EE3124","data":[{"name":"111 abc222 (AKO - SITE:1201162)","y":112}]}]
    
});