Load Highcharts library for chart creation

by maritavindedal

HTML

<!-- Load the Highcharts scripts. Please note that
Highcharts GPT 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/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.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...

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sample Line Chart with Plot Line'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    yAxis: {
        title: {
            text: 'Values'
        },
        plotLines: [{
            value: 4, // Ensure this value is within the y-axis range
            color: 'red',
            width: 2,
            id: 'plotLine1',
            label: {
                text: 'This is a very long plot line label that will be truncated with an ellipsis if it exceeds the available space. This is a very long plot line label that will be truncated with an ellipsis if it exceeds the available space. This is a very long plot line label that will be truncated with an ellipsis if it exceeds the available space. This is a very long plot line label that will be truncated with an ellipsis if it exceeds the available space',
                useHTML: true,
            }
        }]
    },
    series: [{
        name: 'Sample Data',
        data: [1, 3, 2, 4, 6, 5, 7]
    }]
});