Tooltip

A tooltip follows the pointer movement and is used to indicate the value of a point. This feature is applicable for line, column, pie, and area Sparkline. You can customize the tooltip [fill color], [border] and [font].

  • HTML
  • <ej-sparkline id="sparklinecontainer" [tooltip.visible]="true">          
                                   
    </ej-sparkline>

    Tooltip Template

    HTML elements can be displayed in the tooltip by using the [template] option of the tooltip. The template option takes the value of the id attribute of the HTML element. You can use the #point.x# and #point.y# as place holders in the HTML element to display the x and y values of the corresponding point.

  • HTML
  • <div id="item" style="display: none;">
        <div>
            <div>#point.x#</div>
            <div>#point.y#</div>
        </div>
    </div>
    
    <ej-sparkline id="sparklinecontainer" [tooltip.visible]="true" tooltip.template="item">          
                                   
    </ej-sparkline>