Custom Tooltip Text in Google Charts Candlestick Table

Question

I play a little with the Google Chart API, and in fact I need to change the default text shown in the candlestick chart tip. Not only change the style, but also the content.
Does anyone know how to achieve it?

Answer 1

Try this code to customize the contents of the tooltip using html tags.

data.addRows([ ['Mon', 20, 28, 38, 45, customTooltip('Monday')], ['Tue', 31, 38, 55, 66, customTooltip('Tuesday')], ['Wed', 50, 55, 77, 80, customTooltip('Wednesday')], ['Thu', 77, 77, 66, 50, customTooltip('Thursday')], ['Fri', 68, 66, 22, 15, customTooltip('Friday')] ]); function customTooltip(text) { return '<div style="padding:5px 5px 5px 5px;">' + '<table id="medals_layout" style=" color:#db6acf; font-size:large">' + '<tr>' + '<td><b>' + text + '</b></td>' + '</tr>' + '</table>' + '</div>'; } 

Take a look at this jqfaq.com , which has a working sample for a line chart.

Answer 2

You can add this to the playground to view Google:

 function drawVisualization() { data = new google.visualization.DataTable() data.addColumn('string', 'Date'); data.addColumn('number'); data.addColumn('number'); data.addColumn('number'); data.addColumn('number'); data.addColumn({type:'string',role:'tooltip'}); data.addRow(); base = 10; data.setValue(0, 0, 'Datapoint1'); data.setValue(0, 1, base++); data.setValue(0, 2, base++); data.setValue(0, 3, base++); data.setValue(0, 4, base++); data.setValue(0, 5, " This is my tooltip1 "); data.addRow(); data.setValue(1, 0, 'Datapoint2'); data.setValue(1, 1, base++); data.setValue(1, 2, base++); data.setValue(1, 3, base++); data.setValue(1, 4, base++); data.setValue(1, 5, "This is my second tooltip2"); // Draw the chart. var chart = new google.visualization.CandlestickChart(document.getElementById('visualization')); chart.draw(data, {legend:'none', width:600, height:400}); }