CODEWITHSUNDEEP
highchartsangular2-highcharts
lewis_r_s
lewis_r_s

Reputation: 39

How do I style the background color of series tooltip with angular2-highcharts?

I am using a series tooltip to render a custom tooltip. I am unable to find how to style the tooltip.

For example.

Series 1 with series tooltip -> background-color: '#F00'

Series 2 with series tooltip -> background-color: '#0F0'

Series 3 with series tooltip -> background-color: '#00F'

this.options = {
    series: [
        {
            name: 'Test',
            data: seriesData,
            color: '#4DCCFF',
            tooltip: {
                backgroundColor: '#F00',
                headerFormat: '',
                pointFormat: '{point.y}',
            }
        }, ... 
    ]
}

I dont expect the background color to work in the above example but it demonstrates what I'm trying to do.

Is this possible to do with angular2-highcharts? If so how would I approach this? I tried a custom formatter but it reverted back to default tooltip behavior.

Upvotes: 0

Views: 1527

Answers (2)

Kamil Kulig
Kamil Kulig

Reputation: 5826

Another approach is to use plotOptions.series.events.mouseOver to update the color of the tooltip (no useHTML and editing of format required):

  plotOptions: {
    series: {
      events: {
        mouseOver: function() {
          this.chart.tooltip.update({
            backgroundColor: this.color
          });
        }
      }
    }
  }

Live demo: http://jsfiddle.net/kkulig/Lc9rugy4/

Upvotes: 0

Deep 3015
Deep 3015

Reputation: 10075

You have to use tooltip.formatter to achieve different background color for each series.

I am using userOptions this.series.userOptions.colors for background color if you want different color from series color.

this.options = {
        title : { text : 'angular2-highcharts example' },
        tooltip:{
          backgroundColor: null,
          borderWidth: 0,
          shadow: false,
          useHTML:true,
          formatter: function() {
            return '<div style="background-color:'+this.series.userOptions.colors+';padding: 5px;border-radius: 5px;box-shadow: 2px 2px 2px; ">'+this.y+'</div>';
        }
       },
        series: [{
            name: 's1',
            data: [2,3,5,8,13],
            allowPointSelect: true,
            colors:'#F00',
        },{
            name: 's2',
            data: [-2,-3,-5,-8,-13],
            allowPointSelect: true,
            colors:'#0F0'
        }]
    };

Plunker demo

Upvotes: 0

Related Questions