CODEWITHSUNDEEP
javascriptjquerychartscolorshighcharts
ccolina
ccolina

Reputation: 85

highcharts custom colors and tootip point color

I add custom colors stops with gradients but tooltips point colors are objetcs, no rgb, and no show base color in pointFormat. The legend show base colors, no have problem with labels.

pointFormat : '<span style="color:{point.color}">\u25CF</span>'+
' {series.name} {series.color} - {point.color}: <b>{point.y}</b><br/>' }

Customs Colors Chart Custom Colors

Default Colors Chart Default Colors

Here my sample http://jsfiddle.net/castocolina/2mdt9rhb/ Try to comment and uncomment the custom colors block

How fix this problem?

Upvotes: 0

Views: 3002

Answers (2)

ccolina
ccolina

Reputation: 85

Thanks a lot @adelriosantiago, I added a condition to check points or point property depends of series or pie. The latest version of highcharts (4.1.5) have problem to display tooltip of embedded pie, I had to use a previous version (4.0.4)

formatter : function() {
    var s = '<b>' + this.x + '</b>';
    var color = null;

    if (typeof this.points != 'undefined') {
        $.each(this.points, function(i, point) {
            color = point.series.color.stops[1][1];
            if (i == 3) {
                s += '<br/><span style="color:' + color + '">\u00A2</span> ';
                s += point.series.name + ': ' + Highcharts.numberFormat(point.y, 2);
            } else {
                s += '<br/><span style="color:' + color + '">\u25CF</span> ';
                s += point.series.name + ': ' + Highcharts.numberFormat(point.y, 0);
            }
        });
    } else {
        color = this.point.color.stops[1][1];
        s = '<h3 style="color:' + color + '; font-weight: bold;">' + this.point.name + '</h3>';
        s += '<br/><span style="color:' + color + '">\u25CF</span> ';
        s += Highcharts.numberFormat(this.point.y, 2) + ' (' + Highcharts.numberFormat(this.point.percentage, 2) + '%)';
    }

    return s;
}

Here the full fix http://jsfiddle.net/castocolina/2mdt9rhb/4/

Upvotes: 2

adelriosantiago
adelriosantiago

Reputation: 8124

This happens for 2 reasons:

  1. The new custom color is not a solid color, but rather a gradient, therefore when you try to extract the "series.color" a gradient is obtained, the style="color" value requires a solid color to be shown.
  2. According to the documentation on point formatting (http://api.highcharts.com/highcharts#tooltip.pointFormat) the coloring seems be done on the "pointFormat" field but I'm not sure why it does not works there... Hopefully it works on the "formatter" field. Maybe a bug on HighCharts?

Here is the new "formatter" field: 

formatter: function() {
    var s = '<b>'+ this.x +'</b>';

    $.each(this.points, function(i, point) {
    s += '<br/><span style="color:'+ point.series.color.stops[1][1] +'">\u25CF</span>: ' + point.series.name + ': ' + point.y;
    });

    return s;
}

Here is a the working demo with the colors: https://jsfiddle.net/adelriosantiago/pL0yzfsx/3/

Note that the point can't be formatted with a gradient therefore I have chosen the highlighted part of the color which corresponds to "point.series.color.stops[1][1]"

Upvotes: 3

Related Questions