Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Series name with tooltip content. #7

Open
02harleen opened this issue Jan 4, 2018 · 1 comment
Open

Series name with tooltip content. #7

02harleen opened this issue Jan 4, 2018 · 1 comment

Comments

@02harleen
Copy link

02harleen commented Jan 4, 2018

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
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants