2023 Norway car registrations
by oysteinmoseng
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
CSS
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 660px;
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;
}
.highcharts-description {
margin: 0.3rem 10px;
}
JavaScript
Highcharts.chart('container', {
chart: {
type: 'pie',
backgroundColor: '#2F2B37',
},
colors: ['#FFCC33', '#33CC33', '#FF3333', '#33CCFF'],
title: {
text: 'Nyregistrerte biler i 2023',
style: {
color: '#fff'
}
},
credits: {
enabled: false
},
legend: {
enabled: true,
itemStyle: {
color: '#fff'
}
},
series: [{
name: 'Sales',
dataLabels: {
enabled: false
},
showInLegend: true,
colorByPoint: true,
borderColor: '#2F2B37',
borderWidth: 4,
borderRadius: 4,
innerSize: '75%',
data: [{
name: 'Elektrisk',
y: 23.9
}, {
name: 'Diesel',
y: 37.0
}, {
name: 'Bensin',
y: 26.4
}, {
name: 'Hybrid',
y: 12.6
}]
}]
});