<div>
    <style>
        #container {
            max-width: 800px;
            margin: auto;
        }

        .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="scatterContainer"></div>
        <p class="highcharts-description">
            Scatter charts are often used to visualize the relationships
            between data in two dimensions. This chart is visualizing
            olympic contestants by sport, showing how various sports prefer different
            characteristics.
        </p>
    </figure>
</div>

    <?php
        $__scriptKey = '660534199-0';
        ob_start();
    ?>
<script>
    Highcharts.setOptions({
        colors: [
            'rgba(5,141,199,0.5)', 'rgba(80,180,50,0.5)', 'rgba(237,86,27,0.5)'
        ]
    });

    const series = [{
        name: 'Basketball',
        id: 'basketball',
        marker: {
            symbol: 'circle'
        }
    },
    {
        name: 'Triathlon',
        id: 'triathlon',
        marker: {
            symbol: 'triangle'
        }
    },
    {
        name: 'Volleyball',
        id: 'volleyball',
        marker: {
            symbol: 'square'
        }
    }];


    async function getData() {
        const response = await fetch(
            'https://www.highcharts.com/samples/data/olympic2012.json'
        );
        return response.json();
    }


    getData().then(data => {
        const getData = sportName => {
            const temp = [];
            data.forEach(elm => {
                if (elm.sport === sportName && elm.weight > 0 && elm.height > 0) {
                    temp.push([elm.height, elm.weight]);
                }
            });
            return temp;
        };
        series.forEach(s => {
            s.data = getData(s.id);
        });

        Highcharts.chart('scatterContainer', {
            chart: {
                type: 'scatter',
                zooming: {
                    type: 'xy'
                }
            },
            title: {
                text: 'Olympics athletes by height and weight',
                align: 'left'
            },
            subtitle: {
                text:
            'Source: <a href="https://www.theguardian.com/sport/datablog/2012/aug/07/olympics-2012-athletes-age-weight-height">The Guardian</a>',
                align: 'left'
            },
            xAxis: {
                title: {
                    text: 'Height'
                },
                labels: {
                    format: '{value} m'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Weight'
                },
                labels: {
                    format: '{value} kg'
                }
            },
            legend: {
                enabled: true
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 2.5,
                        symbol: 'circle',
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    jitter: {
                        x: 0.005
                    }
                }
            },
            tooltip: {
                pointFormat: 'Height: {point.x} m <br/> Weight: {point.y} kg'
            },
            series
        });
    });
</script>
    <?php
        $__output = ob_get_clean();

        \Livewire\store($this)->push('scripts', $__output, $__scriptKey)
    ?><?php /**PATH C:\laragon\www\marketing_data_analysis\resources\views/livewire/charts/scatter-chart.blade.php ENDPATH**/ ?>