Custom tooltip for the chart with HTML tags.

[Asma M]

Add the legends

"<p><font color=""#282830""><b>Trip start </b>:&nbsp; [trip_start_time]</font></p>
<p style=""font-size: 14px;""><font color=""#282830""><b>Trip end</b> : [trip_end_time]</font></p>
<p style=""font-size: 14px;""><font color=""#282830"">&lt;hr&gt;</font></p><!--EndFragment-->
<p style=""font-size: 14px;""><font color=""#282830""><b>Trip distance (km)</b>&nbsp;:&nbsp;<span style=""font-size: 14px;float: none;"">[distance_km]</span></font></p>
<p style=""font-size: 14px;""><font color=""#282830""><b>Duration (mn)</b>&nbsp;: [total_time_mn]&nbsp;</font></p>
<p><font color=""#282830""><b>Max speed (kph)</b>&nbsp;: [max_speed]</font></p>
<p><span style=""font-size: 14px;float: none;""><font color=""#282830""><b>Avg speed (kph)</b>&nbsp;: [avgspeed]</font></span></p>
<p><font color=""#282830""><b>Fuel consumption (L)&nbsp;</b>: [fuel_consumption]</font>&lt;hr &gt;</p>
<p><svg height=""15"" width=""15"">  <circle cx=""7"" cy=""10"" r=""5"" stroke=""black"" stroke-width=""0"" fill=""#ff0022""></circle></svg><b><font color=""#282830"">&nbsp&nbspWarning&nbsp; lamp</font>&nbsp;</b>: <span style=""font-size: 14px;float: none;"">[warning_red]<span style=""font-size: 14px;float: none;"">&lt;hr &gt;</span></span>&nbsp;<svg height=""15"" width=""15"">  <circle cx=""7"" cy=""10"" r=""5"" stroke=""black"" stroke-width=""0"" fill=""#f9af46""></circle></svg><b><font color=""#282830"">&nbsp&nbspWarning&nbsp; lamp</font>&nbsp;</b>: [warning_orange]</p>"