<div id='info'>
<h3><code>displayHtml();</code></h3>
<p>Customise info at the tip of the chart taking HTML tags or a String as argument. It can include a function of parameters  <code>d</code> for data and <code>i</code> for the dataset. Tags can include images displaying in "gif" or "png" format.</p>
<p>Example below shows how If Statements can be used to trigger different hovering events for different tips.</p> 
<p>The chart below triggers an html tag at data <code>d</code> equals <code>30</code>.</p>  
<p><code>.displayHtml((d, i)=>{if(d == 30){ ..);</code></p>  
</div>

#info{
  margin: 1em;
}
//Redsift
//displayHtml();
//Customise tip of the bar chart

//return gif at data equal 30
let chart = d3_rs_bars.html()
                      .displayHtml((d, i)=>{ 
                                  if(d == 30){ //data equal 30
                                  return 'Data equal '+ d +'.<br><img width="100" src="http://www.thisiscolossal.com/wp-content/uploads/2013/01/3.gif"/>' //output gif image
                                  }else{
                                    return d;  //return all the data
                                  }
                                          });

d3.select('body').datum([1,2,30,20]).call(chart);

View Compiled

External CSS

  1. //static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core.min.css

External JavaScript

  1. //d3js.org/d3.v4.min.js
  2. //static.redsift.io/reusable/d3-rs-bars/latest/d3-rs-bars.umd-es2015.min.js