Custom tooltip text in Candlestick chart of google charts

I'm play开发者_如何学JAVAing 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?

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

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