kiwigrid / angular2-highcharts

:bar_chart: :chart_with_upwards_trend: Highcharts for your Angular project
MIT License
3 stars 3 forks source link

Series name with tooltip content. #7

Open 02harleen opened 6 years ago

02harleen commented 6 years ago

Hi, I have used this package for my angular4 application. I am trying to display a normal tooltip on series name.
To display tooltip icon with series name, I have written HTML by doing tooltip icon is display with the series name but the issue is it also displaying with graph tooltip. The Tooltip should be displaying with series name only, which is displaying below the graph? Components.ts

`
      this.options = {
         title: { text: 'Revenue' },
         chart: { zoomType: 'x',  type: 'areaspline'},
         subtitle: { text: '' },
         exporting: { enabled: false  },
         credits: { enabled: false },
         series: [
           {
              name : 'Revenue <div class="app-tooltip"><a href="javascript:void(0)" class="material-icons">help_outline</a><span class="tooltip-wrapper tooltip-top">@kiwigrid/ngx-highcharts provides possibility to interact with native HighchartsChartObject chart object.</span></div>', 
              data: [29.9, 71.5, 106.4, 129.2, 45,13,120]
           },
           { 
              name : 'Revenue',  
              data: [-29.9, 4, -106.4, 0, 10,-100, 120] 
           }
         ],
         yAxis: {
            title: { text: 'Revenue (In $)' },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
         },
         xAxis: {
            tickmarkPlacement: 'on',
            title: { enabled: false },
            categories: ['02-07-2017','02-08-2017','03-08-2017','04-24-2017','05-27-2017','06-18-2017','07-06-2017','07-19-2017','07-20-2017','09-05-2017']
         },
         tooltip: {
            shared: true,
            valuePrefix: '$',
            useHTML: true 
         },
         legend: {
            useHTML: true   
         },
      };`

screenshot-2018-1-4 bk updated preview mode - invision

I have attached screen short please check it and tell me how it is possible.

marcelkilian commented 6 years ago

Please use highcharts for configuration issues because this library is only a wrapper. There are also multiple examples you can use as reference.

But let me give you a tip. Do not use HTML in obvious properties like name. There are formater options for exactly that (see chart-concepts):

Use legend.labelFormat or legend.labelFormatter for HTML changes in the legend Use tooltip.pointFormat or tooltip.formatter for HTML changes in the tooltip (there are even more formatter available)