CODEWITHSUNDEEP
javascripthighchartsoverlaplinechart
WilliamTeodoro
WilliamTeodoro

Reputation: 61

Overlap datalabels line chart highcharts

How i can solve the problem of the values (dataLabels) ​​below? enter image description here

My JSFiddle: http://jsfiddle.net/3kVJS/3/

 ...
     series: [{
         name: 'zzzzzz',
         data: [17.00, 1.00, 5.00, 0.00, 0.00, 35.00, 6.00, 13.00, 233.00, 2.00, 41.00],
         tooltip: {
             shared: true,
             useHTML: true,
             showInLegend: false,
             pointFormat: '<span style=\"color:{series.color}; text-shadow: 0 1px 1px #ddd;\">{series.name}</span>: <span style=\"font-size:14px!important\"> {point.y}</span><br/>'
         }
     }

Thanks!!!

Upvotes: 2

Views: 4444

Answers (3)

htoniv
htoniv

Reputation: 1668

Hai Just add verticalAlign: 'bottom', instead of using verticalAlign: 'top', at the plotOptions.

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

Highcharts doesn't prevent from dataLabels overlapping. I have created simple module which prevent's from this, see simple demo: http://jsfiddle.net/menXU/1/

Use module by calling StaggerDataLabels(series);, where series is array of all series in chart object.

In the fact it's duplicate of this question, but I couldn't report this.

Upvotes: 4

Subhod30
Subhod30

Reputation: 488

Just add this inside tooltips you will get it what to do.

tooltip: { style: { padding: 20, fontWeight: 'bold', fontSize: '30px', } },

Upvotes: 4

Related Questions