<div>
    <style>
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 360px;
            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;
        }
    </style>

    <figure class="highcharts-figure">
        <div id="lineContainer<?php echo e($chart_data->title ?? 0); ?>"></div>
        <p class="highcharts-description">
            <?php echo e($chart_data->description ?? ''); ?>

        </p>
    </figure>
</div>

    <?php
        $__scriptKey = '3024578958-0';
        ob_start();
    ?>
<script>
    Highcharts.chart('lineContainer<?php echo e($chart_data->title ?? 0); ?>', {
        chart: {
            type: 'line'
        },
        title: {
            text: '<?php echo e($chart_data->title ?? ''); ?>',
            align: 'left'
        },

        subtitle: {
            text: '<?php echo e($chart_data->subtitle ?? ''); ?>',
            align: 'left'
        },

        yAxis: {
            title: {
                text: '<?php echo e($chart_data->yaxis_title ?? ''); ?>'
            }
        },

        xAxis: {
            categories: <?php echo e(Js::from($categories)); ?>,
            crosshair: true,
            title: {
                text: '<?php echo e($chart_data->xaxis_title ?? ''); ?>'
            },
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },

        series: <?php echo e(Js::from($series)); ?>,

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }

    });

</script>
    <?php
        $__output = ob_get_clean();

        \Livewire\store($this)->push('scripts', $__output, $__scriptKey)
    ?><?php /**PATH /home3/newhospv/project1.neways3.com/resources/views/livewire/charts/line-chart.blade.php ENDPATH**/ ?>