Question

27

Highcharts data labels overlapping columns

rated 0 times [ 28] [ 1] / answers: 1 / hits: 15231 / 11 Years ago, wed, october 16, 2013, 12:00:00

I have a problem with data labels overlapping columns in my chart.

$('#container').highcharts({

        chart: {

            type: 'column'

        },



        xAxis: {

            type: 'datetime'

        },

        series: [{

            data: [[Date.UTC(2013, 3, 1, 0, 0, 0), 169], 

                  [Date.UTC(2013, 4, 1, 0, 0, 0), 176], 

                  [Date.UTC(2013, 5, 1, 0, 0, 0), 470], 

                  [Date.UTC(2013, 6, 1, 0, 0, 0), 346], 

                  [Date.UTC(2013, 7, 1, 0, 0, 0), 252], 

                  [Date.UTC(2013, 8, 1, 0, 0, 0), 138]],

            dataLabels: {

                enabled: true

            }

        }]

    });

});

You can see an exmaple here: http://jsfiddle.net/J6WvR/1/

My chart should have fixed height and I don't understand why the largest column height cannot be calculated to fit its data label. How can I fix this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cruzs

Add To Favorites

Follow

Total Points: 710

Total Questions: 113

Total Answers: 100

Location: Nepal

Member since Sat, Jul 18, 2020

4 Years ago

cruzs questions

1 How do I use JavaScript fetch in Laravel 8?

Thu, Nov 26, 20, 00:00, 4 Years ago

1 Print PDF from BLOB

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Best practice for Next.js data fetching inside a component

Wed, Aug 19, 20, 00:00, 4 Years ago

1 Not getting form data in req.body Express/node.js

Sun, Aug 2, 20, 00:00, 4 Years ago

1 React Router history.goBack doesn't work when using < Redirect />

Sun, Jul 12, 20, 00:00, 4 Years ago

View All

answered 11 Years ago morganm · Accepted Answer

According to official API documentation: overflow property

To display data labels outside the plot area, set crop to false and overflow to none.

            dataLabels: {

                enabled: true,

                crop: false,

                overflow: 'none'

            }