JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Sample Line Chart with useHTML and Ellipsis'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    yAxis: {
        title: {
            text: 'Values'
        }
    },
    series: [{
        name: 'Sample Data',
        data: [1, 3, 2, 4, 6, 5, 7]
    }],
    plotLines: [{
        value: 4,
        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',
            useHTML: true,
            style: {
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                width: '100px' // Set a fixed width for ellipsis to take effect
            }
        }
    }]
});