Primefaces 5.2 : customize charts datatip

Question

I want to customize the datatip in Primefaces 5.2 charts. So it means, that I want to change the datatipFormat and the content on it.

It tried this:

--- XHTML ---

<p:chart type="line" 
         model="#{lineChartController.lineModel}"
         title="#{lineChartController.lineModel.title}"
         showDatatip="#{lineChartController.lineModel.showDatatip}"
         datatipFormat="#{lineChartController.datatipFormat}"
         ... />

--- Java ---

public String getDatatipFormat()
{
    return "<span style=\"display:none;\">%s</span><span>%s</span>";
}

isShowDatatip() returns true.

The customized datatipFormat doesn't seem to work, moreover I don't know how to put the data I want on the %s.

To resume:

• I have this Simple Primefaces 5.2 chart datatip
• I want this Customized chart datatip from D3.js

Thanks

Answer 1

I found the solution.

Here, it leads me to the wrong direction.

I put my Java code on the LineChartController and my showDatatip leads to a LineChartModel ... which contains a setDatatipFormat(String) method.

So I use it:

LineChartModel lineModel = new LineChartModel();
...
lineModel.setDatatipFormat("<table><thead><tr><th>Date</th></tr></thead><tbody><td>%s</td><td>%s EUR</td></tbody></table>");

And I still don't know how to put the data I want in the %s.

Answer 2

You can use <p:overlayPanel> for this

    <p:overlayPanel id="myPanel" for="myLbl" showEvent="mouseover" hideEvent="mouseout">
           <p:panelGrid columns="2">  
                <f:facet name="header">#{controller. getDate()}</f:facet>                   
                 <h:outputLabel value="#{controller.dataItem.Col1}" />             
                 <h:outputLabel value="#{controller.dataItem.Col2}" />    

           </p:panelGrid>  
  </p:overlayPanel>  

and bind this overlay onn mousehover of desired point in your chart alrernatively you can call overlay from javascript as well catch the mousehover event of chart.