<div>
    <style>
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 320px;
            max-width: 800px;
            margin: 1em auto;
        }

        #areaContainer {
            height: 450px;
        }

        .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;
        }
    </style>

    <figure class="highcharts-figure">
        <div id="areaContainer"></div>
        <p class="highcharts-description">
            {{$chart_data->description ?? ''}}
        </p>
    </figure>
</div>

@script
<script>
    Highcharts.chart('areaContainer', {
        chart: {
            type: 'area'
        },
        accessibility: {
            description: 'Image description: An area chart compares the nuclear '
        },
        title: {
            text: '{{$chart_data->title ?? ''}}',
        },
        subtitle: {
            text: '{{$chart_data->subtitle ?? ''}}',
        },
        xAxis: {
            categories: {{ Js::from($categories) }},
            crosshair: true,
            title: {
                text: '{{$chart_data->xaxis_title ?? ''}}'
            },
        },
        yAxis: {
            title: {
                useHTML: true,
                text: '{{$chart_data->yaxis_title ?? ''}}',
            },
            labels: {
                formatter: function () {
                    return this.value; // Add 'K' for thousands
                }
            },
        },
        tooltip: {
            pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>' +
                'warheads in {point.x}'
        },
        plotOptions: {
            area: {
                marker: {
                    enabled: true,
                    lineWidth: 1,
                    radius: 3,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: {{ Js::from($series) }}
    });
</script>
@endscript