How do I display a cutom tooltip on google candlestick chart?

Question

I am using google charts in an angular2 environment (used this answer to get going: Angular2 + Google Charts. How to integrate Google Charts in Angular2?). My chart options are set up as follows:

chartType: 'CandlestickChart',
options: {
    backgroundColor : '#101010',
    legend: 'none',
    chartArea: {'width': '85%', 'height': '75%'},
    height: 700,
    colors: ['#aaaaaa'],
    textStyle: {color: 'white'},
    tooltip: {isHtml: true},
    slantedText: true,
    slantedTextAngle: 90,
    candlestick: {
        fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
        risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
    },
    vAxis: {
        title :'price',
        titleTextStyle: {
            color: 'white'
        },
        textStyle: {color: 'white'}
    },
    hAxis: {
        title: '',
        titleTextStyle: {
            color: 'white'
        },
        slantedText: true,
        slantedTextAngle: 90,
        textStyle: {color: 'white'},
    }
},
dataTable: [['Date', 'Low', 'Open', 'Close', 'High', 'tooltip']]

Then when I add the rows, I do it as follows:

rows.push([data[index].endOfCurrentCandleTime, data[index].low, data[index].open, data[index].close, data[index].high, this.createCustomHTMLContent()]);

However, I just get this error:

Last domain does not have enough data columns (missing 3)

How do I get google charts to recognise that the last column is the custom tooltip?

BTW - I've looked at this (Custom tooltip text in Candlestick chart of google charts) and it didn't help

WhiteHat WhiteHat · Accepted Answer · 2017-02-20T13:43:59

need to define the tooltip column's role...

try this...

dataTable: [['Date', 'Low', 'Open', 'Close', 'High', {role: 'tooltip'}]]

for html tooltips...

dataTable: [['Date', 'Low', 'Open', 'Close', 'High', {role: 'tooltip', p: {html: true}}]]

How do I display a cutom tooltip on google candlestick chart?

1 Answers