CODEWITHSUNDEEP
highcharts
ramblingWrecker
ramblingWrecker

Reputation: 430

highcharts dataLabel overflow: justify issue

I've upgraded from highcharts 3.0.5 to 3.0.7 and with that change came the dataLabels overflow:justify property that is set to justify the dataLabels (see this fiddle for an example). This will just slide labels that fall outside of the chart into the bar, but the color doesn't change and there doesn't appear to be an option to change the color. Is there A) any way to force the label to appear beside the bar and readjust the size of the bars, or B) any way to change the color when overflow: justify kicks into play?

The only "fix" that immediately comes to mind is to provide some maxPadding, but that feels a bit hacky.

Upvotes: 1

Views: 3853

Answers (2)

Strikers
Strikers

Reputation: 4776

instead you can use the property

overflow: 'none',
crop: false

here is the API reference

I hope this will help you

Upvotes: 4

brettsam
brettsam

Reputation: 2792

I ran into the same thing and came up with a solution that appears to work for my scenario.

After rendering the chart, I look through the series for dataLabels that have been right-aligned, then change them to white using jQuery.

// snipped: rendering the chart


var chart = $('#chartContainer').highcharts(),   
    labels = $('#chartContainer').find(".highcharts-data-labels tspan"),
    indexesNeedingWhite = [];

$.each(chart.series[0].data, function (index, data) {
    if (data.dataLabel.alignOptions.align === "right") {
        indexesNeedingWhite.push(index);
    }
});

// find the exact text label within this container
// and change the fill to white
$.each(indexesNeedingWhite, function (i, index) {
    $(labels[index]).css('fill', 'white');
});

Upvotes: 3

Related Questions