Saigesp / vue-d3-charts

D3 charts for Vue
https://saigesp.github.io/vue-d3-charts/
GNU Lesser General Public License v2.1
97 stars 30 forks source link

Bug: Tooltip Label override does not work #22

Closed almeidaj closed 3 years ago

almeidaj commented 4 years ago

When trying to use the barchart with a tooltip override, I've noticed that this was not being applied.

Configs:

      config: {
        key: 'year',
        currentKey: '2004',
        values: ['hours'],
        tooltip: { label: 'tooltipLabel' },
        axis: {
          yTicks: 4
        },
        color: {default: '#222f3e', current: '#41B882'}
      },

Data:

      data: [
        {hours: 238, year: '2000', tooltipLabel: 'Worked Hours'},
        {hours: 938, year: '2001', tooltipLabel: 'Worked Hours'},
        {hours: 1832, year: '2002', tooltipLabel: 'Worked Hours'},
        {hours: 2092, year: '2003', tooltipLabel: 'Worked Hours'},
        {hours: 2847, year: '2004', tooltipLabel: 'Worked Hours'},
        {hours: 2576, year: '2005', tooltipLabel: 'Worked Hours'},
        {hours: 2524, year: '2006', tooltipLabel: 'Worked Hours'},
        {hours: 1648, year: '2007', tooltipLabel: 'Worked Hours'},
        {hours: 2479, year: '2008', tooltipLabel: 'Worked Hours'},
        {hours: 3200, year: '2009', tooltipLabel: 'Worked Hours'},
      ],

After looking into the code (d3.barchart.js), I've also noticed that this overide is never being applied. Here is the snippet that generates the tooltip (lines 224-227):

        const key = this.cfg.values[i % this.cfg.values.length];
        this.tooltip.html(() => {
          return `<div>${key}: ${d[key]}</div>`
        })