<template>
<div>
<div id="chart">
<apexchart
type="streamgraph"
height="480"
:options="chartOptions"
:series="series"
></apexchart>
</div>
</div>
</template>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
components: {
apexchart: VueApexCharts,
},
data: function () {
return {
series: [
{
name: 'Robin',
data: [
{ x: '2024-01-08', y: 12 },
{ x: '2024-01-22', y: 14 },
{ x: '2024-02-05', y: 20 },
{ x: '2024-02-19', y: 16 },
{ x: '2024-03-04', y: 20 },
{ x: '2024-03-18', y: 21 },
{ x: '2024-04-01', y: 27 },
{ x: '2024-04-15', y: 24 },
{ x: '2024-04-29', y: 32 },
{ x: '2024-05-13', y: 35 },
{ x: '2024-05-27', y: 34 },
{ x: '2024-06-10', y: 31 },
{ x: '2024-06-24', y: 31 },
{ x: '2024-07-08', y: 32 },
{ x: '2024-07-22', y: 36 },
{ x: '2024-08-05', y: 38 },
{ x: '2024-08-19', y: 34 },
{ x: '2024-09-02', y: 29 },
{ x: '2024-09-16', y: 26 },
{ x: '2024-09-30', y: 32 },
{ x: '2024-10-14', y: 26 },
{ x: '2024-10-28', y: 26 },
{ x: '2024-11-11', y: 24 },
{ x: '2024-11-25', y: 22 },
{ x: '2024-12-09', y: 16 },
{ x: '2024-12-23', y: 13 },
{ x: '2025-01-06', y: 13 },
],
},
{
name: 'Wren',
data: [
{ x: '2024-01-08', y: 12 },
{ x: '2024-01-22', y: 15 },
{ x: '2024-02-05', y: 15 },
{ x: '2024-02-19', y: 20 },
{ x: '2024-03-04', y: 19 },
{ x: '2024-03-18', y: 25 },
{ x: '2024-04-01', y: 26 },
{ x: '2024-04-15', y: 26 },
{ x: '2024-04-29', y: 24 },
{ x: '2024-05-13', y: 30 },
{ x: '2024-05-27', y: 24 },
{ x: '2024-06-10', y: 31 },
{ x: '2024-06-24', y: 30 },
{ x: '2024-07-08', y: 29 },
{ x: '2024-07-22', y: 23 },
{ x: '2024-08-05', y: 28 },
{ x: '2024-08-19', y: 22 },
{ x: '2024-09-02', y: 26 },
{ x: '2024-09-16', y: 20 },
{ x: '2024-09-30', y: 18 },
{ x: '2024-10-14', y: 15 },
{ x: '2024-10-28', y: 16 },
{ x: '2024-11-11', y: 12 },
{ x: '2024-11-25', y: 9 },
{ x: '2024-12-09', y: 8 },
{ x: '2024-12-23', y: 8 },
{ x: '2025-01-06', y: 10 },
],
},
{
name: 'Blackbird',
data: [
{ x: '2024-01-08', y: 8 },
{ x: '2024-01-22', y: 10 },
{ x: '2024-02-05', y: 12 },
{ x: '2024-02-19', y: 16 },
{ x: '2024-03-04', y: 19 },
{ x: '2024-03-18', y: 17 },
{ x: '2024-04-01', y: 22 },
{ x: '2024-04-15', y: 24 },
{ x: '2024-04-29', y: 24 },
{ x: '2024-05-13', y: 22 },
{ x: '2024-05-27', y: 30 },
{ x: '2024-06-10', y: 30 },
{ x: '2024-06-24', y: 24 },
{ x: '2024-07-08', y: 34 },
{ x: '2024-07-22', y: 26 },
{ x: '2024-08-05', y: 35 },
{ x: '2024-08-19', y: 25 },
{ x: '2024-09-02', y: 32 },
{ x: '2024-09-16', y: 23 },
{ x: '2024-09-30', y: 25 },
{ x: '2024-10-14', y: 24 },
{ x: '2024-10-28', y: 20 },
{ x: '2024-11-11', y: 19 },
{ x: '2024-11-25', y: 21 },
{ x: '2024-12-09', y: 18 },
{ x: '2024-12-23', y: 14 },
{ x: '2025-01-06', y: 13 },
],
},
{
name: 'Chaffinch',
data: [
{ x: '2024-01-08', y: 7 },
{ x: '2024-01-22', y: 8 },
{ x: '2024-02-05', y: 13 },
{ x: '2024-02-19', y: 16 },
{ x: '2024-03-04', y: 14 },
{ x: '2024-03-18', y: 16 },
{ x: '2024-04-01', y: 23 },
{ x: '2024-04-15', y: 23 },
{ x: '2024-04-29', y: 25 },
{ x: '2024-05-13', y: 24 },
{ x: '2024-05-27', y: 29 },
{ x: '2024-06-10', y: 29 },
{ x: '2024-06-24', y: 30 },
{ x: '2024-07-08', y: 23 },
{ x: '2024-07-22', y: 30 },
{ x: '2024-08-05', y: 22 },
{ x: '2024-08-19', y: 23 },
{ x: '2024-09-02', y: 19 },
{ x: '2024-09-16', y: 20 },
{ x: '2024-09-30', y: 16 },
{ x: '2024-10-14', y: 16 },
{ x: '2024-10-28', y: 14 },
{ x: '2024-11-11', y: 14 },
{ x: '2024-11-25', y: 11 },
{ x: '2024-12-09', y: 9 },
{ x: '2024-12-23', y: 5 },
{ x: '2025-01-06', y: 5 },
],
},
{
name: 'Blue Tit',
data: [
{ x: '2024-01-08', y: 11 },
{ x: '2024-01-22', y: 8 },
{ x: '2024-02-05', y: 9 },
{ x: '2024-02-19', y: 12 },
{ x: '2024-03-04', y: 12 },
{ x: '2024-03-18', y: 16 },
{ x: '2024-04-01', y: 17 },
{ x: '2024-04-15', y: 21 },
{ x: '2024-04-29', y: 19 },
{ x: '2024-05-13', y: 24 },
{ x: '2024-05-27', y: 28 },
{ x: '2024-06-10', y: 30 },
{ x: '2024-06-24', y: 33 },
{ x: '2024-07-08', y: 35 },
{ x: '2024-07-22', y: 32 },
{ x: '2024-08-05', y: 31 },
{ x: '2024-08-19', y: 31 },
{ x: '2024-09-02', y: 34 },
{ x: '2024-09-16', y: 33 },
{ x: '2024-09-30', y: 32 },
{ x: '2024-10-14', y: 23 },
{ x: '2024-10-28', y: 22 },
{ x: '2024-11-11', y: 23 },
{ x: '2024-11-25', y: 23 },
{ x: '2024-12-09', y: 15 },
{ x: '2024-12-23', y: 14 },
{ x: '2025-01-06', y: 15 },
],
},
{
name: 'Swallow',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 5 },
{ x: '2024-04-01', y: 18 },
{ x: '2024-04-15', y: 26 },
{ x: '2024-04-29', y: 41 },
{ x: '2024-05-13', y: 47 },
{ x: '2024-05-27', y: 39 },
{ x: '2024-06-10', y: 35 },
{ x: '2024-06-24', y: 16 },
{ x: '2024-07-08', y: 5 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Swift',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 6 },
{ x: '2024-04-29', y: 16 },
{ x: '2024-05-13', y: 33 },
{ x: '2024-05-27', y: 33 },
{ x: '2024-06-10', y: 31 },
{ x: '2024-06-24', y: 14 },
{ x: '2024-07-08', y: 4 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Willow Warbler',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 3 },
{ x: '2024-04-01', y: 8 },
{ x: '2024-04-15', y: 18 },
{ x: '2024-04-29', y: 23 },
{ x: '2024-05-13', y: 24 },
{ x: '2024-05-27', y: 20 },
{ x: '2024-06-10', y: 16 },
{ x: '2024-06-24', y: 10 },
{ x: '2024-07-08', y: 3 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'House Martin',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 4 },
{ x: '2024-04-29', y: 13 },
{ x: '2024-05-13', y: 18 },
{ x: '2024-05-27', y: 21 },
{ x: '2024-06-10', y: 23 },
{ x: '2024-06-24', y: 14 },
{ x: '2024-07-08', y: 4 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Cuckoo',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 3 },
{ x: '2024-04-29', y: 9 },
{ x: '2024-05-13', y: 12 },
{ x: '2024-05-27', y: 8 },
{ x: '2024-06-10', y: 2 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Fieldfare',
data: [
{ x: '2024-01-08', y: 38 },
{ x: '2024-01-22', y: 36 },
{ x: '2024-02-05', y: 29 },
{ x: '2024-02-19', y: 19 },
{ x: '2024-03-04', y: 6 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 0 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 6 },
{ x: '2025-01-06', y: 16 },
],
},
{
name: 'Redwing',
data: [
{ x: '2024-01-08', y: 13 },
{ x: '2024-01-22', y: 29 },
{ x: '2024-02-05', y: 30 },
{ x: '2024-02-19', y: 23 },
{ x: '2024-03-04', y: 14 },
{ x: '2024-03-18', y: 5 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 0 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 4 },
],
},
{
name: 'Brambling',
data: [
{ x: '2024-01-08', y: 15 },
{ x: '2024-01-22', y: 20 },
{ x: '2024-02-05', y: 15 },
{ x: '2024-02-19', y: 4 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 0 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 4 },
],
},
{
name: 'Wigeon',
data: [
{ x: '2024-01-08', y: 29 },
{ x: '2024-01-22', y: 22 },
{ x: '2024-02-05', y: 14 },
{ x: '2024-02-19', y: 4 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 0 },
{ x: '2024-04-15', y: 0 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 0 },
{ x: '2024-09-30', y: 0 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 4 },
{ x: '2024-12-23', y: 12 },
{ x: '2025-01-06', y: 24 },
],
},
{
name: 'Wheatear',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 5 },
{ x: '2024-04-01', y: 11 },
{ x: '2024-04-15', y: 6 },
{ x: '2024-04-29', y: 0 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 0 },
{ x: '2024-09-16', y: 4 },
{ x: '2024-09-30', y: 10 },
{ x: '2024-10-14', y: 5 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
{
name: 'Sandpiper',
data: [
{ x: '2024-01-08', y: 0 },
{ x: '2024-01-22', y: 0 },
{ x: '2024-02-05', y: 0 },
{ x: '2024-02-19', y: 0 },
{ x: '2024-03-04', y: 0 },
{ x: '2024-03-18', y: 0 },
{ x: '2024-04-01', y: 3 },
{ x: '2024-04-15', y: 9 },
{ x: '2024-04-29', y: 4 },
{ x: '2024-05-13', y: 0 },
{ x: '2024-05-27', y: 0 },
{ x: '2024-06-10', y: 0 },
{ x: '2024-06-24', y: 0 },
{ x: '2024-07-08', y: 0 },
{ x: '2024-07-22', y: 0 },
{ x: '2024-08-05', y: 0 },
{ x: '2024-08-19', y: 0 },
{ x: '2024-09-02', y: 6 },
{ x: '2024-09-16', y: 14 },
{ x: '2024-09-30', y: 8 },
{ x: '2024-10-14', y: 0 },
{ x: '2024-10-28', y: 0 },
{ x: '2024-11-11', y: 0 },
{ x: '2024-11-25', y: 0 },
{ x: '2024-12-09', y: 0 },
{ x: '2024-12-23', y: 0 },
{ x: '2025-01-06', y: 0 },
],
},
],
chartOptions: {
chart: {
type: 'streamgraph',
height: 480,
},
// A ramp, not a categorical palette. With this many bands a wrapping palette
// gives neighbours the same colour and they merge into one shape; stepping
// through a range keeps every band its own while the whole still reads as one
// surface.
colors: [
'#0B3C49',
'#14595B',
'#1C7A6B',
'#2E9E77',
'#57BE7F',
'#8CD48A',
'#C2E39A',
'#E8E3A2',
'#F2CE86',
'#EBAF6B',
'#DE8F58',
'#CC7050',
'#B4544E',
'#94414E',
'#6E3448',
'#472A3C',
],
plotOptions: {
streamgraph: {
offset: 'wiggle',
order: 'inside-out',
},
},
legend: {
show: false,
},
title: {
text: 'A year of birds at the reserve',
align: 'left',
},
subtitle: {
text: 'Illustrative counts. Residents hold the middle; migrants arrive, swell and go.',
align: 'left',
},
xaxis: {
type: 'datetime',
labels: {
format: 'MMM',
},
},
tooltip: {
x: {
format: 'd MMM yyyy',
},
},
},
}
},
}
</script>
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>