Anychart Bullet chart tooltips

Question

I'm trying to create a bullet chart that also has tooltips. I haven't been able to figure it out yet. Here is the below code I'm using. I got most of it from Anychart documentation and fit it to our use case. I don't see tooltips in any example bullet charts here: https://www.anychart.com/products/anychart/gallery/Bullet_Charts/ which makes me think it may not be possible.

I've attached a screenshot to show you what we see. No tooltips appear when hovering the chart.

We are using React and "anychart": "^8.10.0", "anychart-react": "^1.4.1",

Thank you!

// Example data:
const testSet = [      
  {
    'program_id': 3,
    'program_name': 'MBA',
    'terms': [
      {
        'term_id': 1,
        'term_name': 'Spring 20',
        'budgeted': 35,
        'forecasted': 50,
        'actual': 30
      }
    ],
    'x': 'Taylor',
    'value': 10
  },
  {
    'program_id': 3,
    'program_name': 'MBA',
    'terms': [
      {
        'term_id': 1,
        'term_name': 'Spring 19',
        'budgeted': 35,
        'forecasted': 50,
        'actual': 30
      }
    ],
    'x': 'Taylor',
    'value': 10
  },
  {
    'program_id': 3,
    'program_name': 'MBA',
    'terms': [
      {
        'term_id': 1,
        'term_name': 'Spring 18',
        'budgeted': 35,
        'forecasted': 50,
        'actual': 30
      }
    ],
    'x': 'Taylor',
    'value': 10
  },
  
]

function createBulletChart(name: string) {
  
  const term = testSet.filter(x => x.terms[0].term_name === name);

  const stage = anychart.graphics.create('container');
  const pattern = stage.hatchFill('backward-diagonal', '#E47911 0.9', 1);

  const bullet = anychart.bullet(term.flatMap(n => ([
    {
      x: 'Forecasted',
      value: n.terms[0].forecasted,
      type: 'column',
      gap: 0.3,
      fill: pattern,
      stroke: '2 #E47911 0.9',
    },
    {
      x: 'Actual',
      value: n.terms[0].actual,
      type: 'column',
      gap: 0.3,
      fill: {color: '#E47911'},
      stroke: null,
    },
    {
      x: 'Budgeted',
      value: n.terms[0].budgeted,
      type: 'line',
      gap: 0.2,
      stroke: { thickness: 2, color: 'black' },
    }
  ])));

  const scale = bullet.scale();
  scale.maximum(100)
  bullet.tooltip();
  bullet.legend(true);
  bullet.layout('vertical');
  
  return bullet;
}

*I don't think this matters but just adding for completeness*

function createBulletScale() {
  const axis = anychart.standalones.axes.linear();
  axis.title(null);

  const scale = anychart.scales.linear();
  scale.minimum(0).maximum(100);
  scale.ticks().interval(20);
  axis.scale(scale);
  axis.orientation('right').stroke('#CECECE');
  axis.ticks().enabled(true).stroke('#CECECE').length(4);
  axis
    .labels()
    .useHtml(true)
    .padding(0, 3, 0, 10)
    .format('{%Value}');
  const axisTitle = axis.title();
  axisTitle.enabled(true).text('Counts')
  axis.minorTicks(null);

  return axis;
}

let table = anychart.standalones.table();
    table.hAlign('center');

    const allTerms = testSet.map(t => t.terms[0].term_name)
    const colCount = allTerms.length + 1;

    table.contents([
      [null],
      [null],
      allTerms.map(n => createBulletChart(n)),
      allTerms,
      [null],
      [null],
    ]);

    const stage = anychart.graphics.create('container');
    const legend = anychart.standalones.legend();

    legend.items([
      {index: 0, text: 'Forecasted', iconFill: 'white', iconHatchFill: 'backward-diagonal #E47911 0.9', iconSroke: '#E47911'},
      {index: 1, text: 'Actual', iconFill: '#E47911'},
      {index: 2, text: 'Budgeted', iconMarkerFill: '#FFEB3B', iconType: 'line'}
    ]);
    legend.position('top')
    legend.container(stage);
    legend.draw()

    table.colsCount(colCount)

    const axis = createBulletScale()

    table.getCell(2, colCount - 1).content(axis).hAlign('start')

    table.getRow(0).height(30);
    table.getRow(1).height(80).cellPadding(10, 10, 20, 10);
    table.getRow(3).height(60);
    table.getRow(2).cellPadding(30, colCount*2, 10, colCount*2);
    table.getRow(4).height(5);
    table.getRow(5).height(45).cellPadding(0,0,20,0);

    table
      .getCell(0, 1)
      .colSpan(colCount-2)
      .content('Program Overview')
      .hAlign('center')
      .vAlign('bottom')
      .fontColor('#212121')
      .fontSize(16);
    
    table
      .getCell(5, 1)
      .colSpan(colCount-2)
      .content('Terms')
      .hAlign('center')
      .vAlign('bottom')
      .fontColor('#212121')
      .fontSize(16);

    table
      .getCell(1, 1)
      .colSpan(colCount-2)
      .content(legend)
      .hAlign('center')
      .vAlign('top')
      .fontColor('#212121')
      .fontSize(16);

    

    table.cellBorder(null);
    table.border(null);
    table.container('container');
    table.vAlign('middle');
    table.draw();

    
    

    return <AnyChart
      instance={table}
      height={600}
    />