import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'
const ApexChart = () => {
const [state, setState] = React.useState({
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 },
],
},
],
options: {
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',
},
},
},
})
return (
<div>
<div id="chart">
<ReactApexChart
options={state.options}
series={state.series}
type="streamgraph"
height={480}
/>
</div>
</div>
)
}
export default ApexChart