How can I display a drilldown label in HighCharts on a mobile device?

Question

How can I display a drilldown label in HighCharts on a mobile device?

When viewing the chart on mobile devices, I notice that the drilldown data label for my pie chart is being truncated with ellipses. My goal is to adjust the styles so that the entire word "streaming" is displayed without any dots cutting off the bottom part of the word. Any suggestions on how to achieve this would be greatly appreciated.

Here are the current styles I am using:

drilldown: {
            activeDataLabelStyle: {
                color: 'black',
                fontSize: '14px',
            }
}

css vue.js highcharts

Answer 1

Answer №1

To set the text overflow style to clip in your code, utilize the textOverflow property. If you require adjustments to individual data label positioning, consider using either the y or x properties as demonstrated below:

    series: [{
        ...,
        dataLabels: {
            ...,
            style: {
                textOverflow: 'clip'
            }
        },
        data: [..., {
            ...,
            dataLabels: {
                y: -20
            }
        }]
    }]

Check out this live demonstration: http://jsfiddle.net/BlackLabel/9Lhokg4t/

For more detailed information, refer to the API Reference here: https://api.highcharts.com/highcharts/series.pie.dataLabels

Answer 2

To set the text overflow style to clip in your code, utilize the textOverflow property. If you require adjustments to individual data label positioning, consider using either the y or x properties as demonstrated below:

    series: [{
        ...,
        dataLabels: {
            ...,
            style: {
                textOverflow: 'clip'
            }
        },
        data: [..., {
            ...,
            dataLabels: {
                y: -20
            }
        }]
    }]

Check out this live demonstration: http://jsfiddle.net/BlackLabel/9Lhokg4t/

For more detailed information, refer to the API Reference here: https://api.highcharts.com/highcharts/series.pie.dataLabels

How can I display a drilldown label in HighCharts on a mobile device?

Answer №1

Similar questions

The rating and comment section is failing to adapt to smaller screens, creating a terrible user experience

Issues with Nuxt Authentication when deployed live

What could be causing my CSS and HTML to display incorrectly in IE and Chrome browsers?

Testing Vue.js Components with Mocks and Unit Tests

Use the no-repeat feature to set the background image in an Asp:Chart

Ensuring the input element is correctly aligned in its position

Decrease the padding value inherited from CSS while reducing the numerical value

What is the best time to fetch the height of an element containing an image?

Setting the default styling for unordered lists in Material-UI React is a breeze with these simple steps

Synchronization issue between VueJS, Firebase Auth, and Route Guards leading to race conditions

The height of each Bootstrap column is equal to the height of its corresponding

How to vertically align text within a container in Bootstrap?

Make a div with absolute positioning overflow outside of a div with relative positioning that is scrollable

Using assets in data property or methods in Vue 3 with Vite - how to efficiently manage and access resources

Attempting to grasp the concept of memory leakage in a more thorough manner

jquery is in motion while svg paths are at a standstill, waiting to

Switch between GeoJSON layers by using an HTML button within Mapbox GL JS, instead of relying on traditional links

Shift the Search bar to the last position on the navigation bar

CSS error with contrasting colors, the reason behind it is unknown

Failure to display masonry arrangement