Top 10 with modified color scheme

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="report">
 Test
</div>
<footer>
    <div class="report-info" style="display: block;">Based on production times.</div>
    <div class="legend">
        <span class="legend-color color-technical"></span>
        <span class="to-be-translated" data-translation-key="technical">technical</span>
        <span class="legend-color color-technical-commented"></span>
        <span class="to-be-translated" data-translation-key="commented">Commented</span>

        <span class="legend-color color-organizational"></span>
        <span class="to-be-translated" data-translation-key="organizational">organizational</span>
        <span class="legend-color color-organizational-commented"></span>
        <span class="to-be-translated" data-translation-key="commented">Commented</span>

        <span class="legend-color color-waiting"></span>
        <span class="to-be-translated" data-translation-key="waiting">waiting</span>
        <span class="legend-color color-waiting-commented"></span>
        <span class="to-be-translated" data-translation-key="commented">Commented</span>
        
        <span class="legend-color color-external"></span>
        <span class="to-be-translated" data-translation-key="external">external</span> 
        
        <span class="legend-color color-external-commented"></span>
        <span class="to-be-translated" data-translation-key="external">Commented</span>         

        <span class="legend-color color-uncategorized"></span>
        <span class="to-be-translated" data-translation-key="uncategorized">uncategorized</span>
    </div>
</footer>

CSS

body {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
}

.color-technical {
  background-color: #F0A446;
}

.color-technical-commented {
  background-color: #fFe14D;
}

.color-organizational {
  background-color: #527BD4;
}

.color-organizational-commented {
  background-color: #4DD1FF;
}

.color-waiting {
  background-color: #2F983D;
}

.color-waiting-commented {
  background-color: #91c92f;
}

.color-uncategorized {
  background-color: #999999;
}

.color-external {
  background-color: #bd15ac;
}
.color-external-commented {
  background-color: #ed35bc;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.report-info {
  border: 1px solid #ddd;
  border-bottom: none;
  background-color: #eee;
  padding: 3px;
  color: #666;
  width: auto;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top-right-radius: 10px;
}

.legend {
  padding: 5px;
  background: white;
  width: 100%;
  position: fixed;
  bottom: 30px;
  left: 0;
}

.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 5px;
}

JavaScript

var _reportData = [];
var _containerId = '#report';

data= {
	"resultElement0": {
		"title": "Start up function dry protection valid packs active",
		"percentage": "11.4407046642684",
		"frequency": "1039",
		"machine": "L9_COMBISMILE",
		"category": "Technical",
		"duration": "01:25:33",
		"code": "332289",
		"units": "Track01, Track02, Track03, Track04, Track05, Track06",
		"responsible": "Downstream",
		"comment": ""
	},
	"resultElement1": {
		"title": "Track 3 manual switched off",
		"percentage": "10.0163501235002",
		"frequency": "28",
		"machine": "L9_COMBISMILE",
		"category": "Organizational",
		"duration": "01:14:54",
		"code": "85249",
		"units": "Track03",
		"responsible": "Self",
		"comment": "Leaking nozzles"
	},
	"resultElement2": {
		"title": "Track 4 manual switched off",
		"percentage": "10.0163322932424",
		"frequency": "28",
		"machine": "L9_COMBISMILE",
		"category": "Organizational",
		"duration": "01:14:54",
		"code": "85505",
		"units": "Track04",
		"responsible": "Self",
		"comment": ""
	},
	"resultElement3": {
		"title": "Track 5 manual switched off",
		"percentage": "10.0163278356779",
		"frequency": "28",
		"machine": "L9_COMBISMILE",
		"category": "Organizational",
		"duration": "01:14:54",
		"code": "85761",
		"units": "Track05",
		"responsible": "Self",
		"comment": "Jammed nozzles"
	},
	"resultElement4": {
		"title": "Track 6 manual switched off",
		"percentage": "9.98671177751601",
		"frequency": "27",
		"machine": "L9_COMBISMILE",
		"category": "Organizational",
		"duration": "01:14:40",
		"code": "86017",
		"units": "Track06",
		"responsible": "Self",
		"comment": ""
	},
	"resultElement5": {
		"title": "Off-Conveyor belt stopped due backlog into machine",
		"percentage": "3.55505251445527",
		"frequency": "24",
		"machine": "L9_COMBISMILE",
		"category": "Technical",
		"duration": "00:26:35",
		"code": "195329",
		"units": "Track01, Track02, Track03, Track04, Track05, Track06",
		"responsible": "Downstream",
		"comment":...