percentage column tests

by Bernat Comerma

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

#container {
  height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
  min-width: 310px;
  max-width: 800px;
  margin: 1em auto;
}

.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

const randomSeries = () => {
  let aData = [];
  for (let i = 0; i < 36; i++) {
  	aData.push(~~(Math.random() * 100) + 1);
  }
  return aData;
}

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '100% stacked column chart'
    },
    xAxis: {
        categories: `Ene'20',Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic,
        Ene'21',Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic,
        Ene'22',Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic`.split(',')
    },
    yAxis: {
        reversedStacks: false,
        min: 0,
        title: {
            text: '%'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: {point.x} <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }        
    },
    series: [{
        name: 'Windows Phone',
        data: randomSeries()
    }, {
        name: 'Windows 8',
        data: randomSeries()
    }, {
        name: 'Desktop',
        data: randomSeries()
    }, {
        name: 'Mobile',
        data: randomSeries()
    }, {
        name: 'Android',
        data: randomSeries()
    }]
});