Custom tooltip text in Candlestick chart of google charts

Question

I'm playing a bit with Google Charts API, and actually I need to change the default text showed in the tooltip of candlestick chart. Not only to change the style, but also it's content.
Does anyone knows how to achieve it?

Answer 1

Try this code to customize Tooltip content 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 that has a working sample for Line chart

Answer 2

You can drop this into google's visualization playground:

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});
}