CODEWITHSUNDEEP
plotly.js
supreethapavan
supreethapavan

Reputation: 21

hoverinfo not working with hovertemplate in plotly

I am trying to include a plotly angular wrapper line chart with markers. I have provided a custom template to show my tooltip details hovertemplate and I am getting the legend name associated with the tooltip.

Note: Hoverinfo works well without hovertemplate

I have a custom hover template with the legend name next to it. I have given the hoverinfo:'x+y' despite this I am still getting the legend name associated with the tooltip

Image of Actual O/P My [1]: https://i.sstatic.net/IoN9p.png

Expected o/p - custom tooltip without the legend name.

However I was not successful in getting anything related on internet. Your help would be appreciated

constructor(){

this.mylevel ={
       x: this.x, 
       y: this.y1, 
       xaxis:'x',
       yaxis:'y',
       type: 'scatter',
       name:'level (mm)',
       hoverinfo:'x',
       hovertemplate:'here comes my custom tooltip',
       mode: 'lines+markers',  
      };
    }

ngOnInit() {
this.graph = {
data: \[this.mylevel\],
layout:{
  title: 'my chart',
  hovermode:'closest',
  hoverlabel: { bgcolor: "#fff" },
  xaxis: {title: 'years', zeroline: false},
  yaxis: {title: 'Level(%)',zeroline: false},

 }
}

<plotly-plot \[data\]="graph.data" \[layout\]="graph.layout"></plotly-plot>][1]

Upvotes: 1

Views: 4261

Answers (2)

Dewanshu
Dewanshu

Reputation: 534

Try adding text property and assign your tooltip value to it in your case it is this.x I guess. Then in hovel info specify that you want to display text.

I created a sample code hope this will help.

this.mylevel ={
       x: this.x, 
       y: this.y1, 
       xaxis:'x',
       yaxis:'y',
       type: 'scatter',
       name:'level (mm)',
       text: this.x
       hoverinfo:'text',
       hovertemplate:'here comes my custom tooltip',
       mode: 'lines+markers',  
      };
    }

Upvotes: 1

snaits
snaits

Reputation: 330

The template supports an "extra info" box that by default shows the series name. You can remove it by adding "" to the end of the template string.

More info: https://plotly.github.io/schema-viewer/?attribute=hovertemplate

Upvotes: 0

Related Questions