<div id="chart{{name|default:'Main'}}"></div>
<script>
    var triggerMatchesChartOptions = {
        dataLabels: {
            enabled: false
        },
        tooltip: {
            shared: false,
        },
        colors: ["#805AD5"],
        chart: {
            zoom: {
                enabled: false,
            },
            toolbar: {
                show: false,
            },
            type: 'area',
            height: {{height|default:"200"}},
            offsetY: -1,
            animations: {
                enabled: false
            },
            sparkline: {
                enabled: {% if sparkline %}true{% else %}false{% endif %},
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.8,
                    opacityTo: 0,
                    stops: [0, 75, 100]
                },
            },
        },
        grid: {
            padding: {
                right: 0,
                left: -8,
            },
            xaxis: {
                lines: {
                    show: true,
                }
            },
            yaxis: {
                lines: {
                    show: false,
                }
            },
            show: true
        },
        yaxis: {
            labels: {
                show: false,
                formatter: val => val.toFixed(0)
            },
            padding: {
                left: 0,
            }
        },
        xaxis: {
            type: "datetime",
        },
        stroke: {
            width: 1.5,
        },
        series: [{
            name: "{{unit|default:'Sessions'}}",
            data: {{data|safe}}
        }]
    };
    var triggerMatchesChart = new ApexCharts(document.querySelector("#chart{{name|default:'Main'}}"), triggerMatchesChartOptions);
    triggerMatchesChart.render();
</script>