Highcharts Demo

HTML

<!-- Load the Highcharts scripts. Please note that the Chatbot loads all scripts
    because we do not know what is being used in the configuration previews. In
    production, unused scripts should be removed. --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/highcharts-3d.js"></script> <script src="https://code.highcharts.com/modules/stock.js"></script> <script src="https://code.highcharts.com/maps/modules/map.js"></script> <script src="https://code.highcharts.com/modules/gantt.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <script src="https://code.highcharts.com/modules/annotations-advanced.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/draggable-points.js"></script> <script src="https://code.highcharts.com/modules/static-scale.js"></script> <script src="https://code.highcharts.com/modules/broken-axis.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/tilemap.js"></script> <script src="https://code.highcharts.com/modules/timeline.js"></script> <script src="https://code.highcharts.com/modules/treemap.js"></script> <script src="https://code.highcharts.com/modules/treegraph.js"></script> <script src="https://code.highcharts.com/modules/item-series.js"></script> <script src="https://code.highcharts.com/modules/drilldown.js"></script> <script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script> <script src="https://code.highcharts.com/modules/bullet.js"></script> <script src="https://code.highcharts.com/modules/funnel.js"></script> <script...

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        zoomType: 'x' // Enables zooming on the x-axis
    },
    title: {
        text: 'Spline Chart with Fixed Horizontal Line and Zoom'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%e %b %Y'
        }
    },
    yAxis: {
        title: {
            text: 'Values'
        },
        plotLines: [{
            value: 55000,
            color: 'red',
            width: 2,
            zIndex: 5,
            label: {
                text: 'Fixed Line at 55000',
                align: 'right',
                verticalAlign: 'bottom',
                style: {
                    color: 'red'
                }
            }
        }]
    },
    series: [{
        name: 'Sample Data',
 data: [[Date.UTC(2024, 11, 05, 10, 57, 06),10122],[Date.UTC(2024, 11, 05, 11, 00, 25),10122],[Date.UTC(2024, 11, 05, 11, 03, 45),10122],[Date.UTC(2024, 11, 05, 11, 07, 05),10122],[Date.UTC(2024, 11, 05, 11, 10, 25),10136],[Date.UTC(2024, 11, 05, 11, 13, 45),10122],[Date.UTC(2024, 11, 05, 11, 17, 05),10122],[Date.UTC(2024, 11, 05, 11, 20, 26),10122],[Date.UTC(2024, 11, 05, 11, 23, 46),10122],[Date.UTC(2024, 11, 05, 11, 27, 06),10122],[Date.UTC(2024, 11, 05, 11, 30, 26),10122],[Date.UTC(2024, 11, 05, 11, 33, 45),10122],[Date.UTC(2024, 11, 05, 11, 37, 06),10122],[Date.UTC(2024, 11, 05, 11, 40, 26),10136],[Date.UTC(2024, 11, 05, 11, 43, 45),10122],[Date.UTC(2024, 11, 05, 11, 47, 04),10136],[Date.UTC(2024, 11, 05, 11, 50, 25),10136],[Date.UTC(2024, 11, 05, 11, 53, 44),10136],[Date.UTC(2024, 11, 05, 11, 57, 04),10136],[Date.UTC(2024, 11, 05, 12, 00, 24),10136],[Date.UTC(2024, 11, 05, 12, 03, 44),10136],[Date.UTC(2024, 11, 05, 12, 07, 04),10136],[Date.UTC(2024, 11, 05, 12, 10, 24),10136],[Date.UTC(2024, 11, 05, 12, 13, 44),10152],[Date.UTC(2024, 11, 05, 12, 17, 04),10136],[Date.UTC(2024, 11, 05, 12, 20, 24),10136],[Date.UTC(2024, 11, 05, 12, 23, 45),10152],[Date.UTC(2024,...