Most right Tooltip is cut and conflict with datalabels

[am-benisha]

Hi y-takey, Thanks for your awesome work of this plugin.

I have some issues and maybe you can help me with them:

1. I'm using datalabels plugin for showing the values over the bars. When i'm NOT using your plugin, the chart looking like this: But when i'm using your plugin, it first replaces the data values with their relative percentage: When we hover once over the chart, the label are changing to the right values

2. The most right tooltip is cut:

Thanks in advance

[y-takey]

Hi @am-benisha , Thanks for the issue :)

1. I will fix this bug. for now, you can avoid the issue using formatter option. like this:

new Chart(document.getElementById("my-chart-1"), {
  type: "horizontalBar",
  data: { ... },
  options: {
    plugins: {
      stacked100: { enable: true  },
      datalabels: {
        formatter: (_value, context) => {
          const { datasetIndex, dataIndex } = context;
          const value = context.chart.data.originalData[datasetIndex][dataIndex]
          // or you can use `context.chart.data.calculatedData[datasetIndex][dataIndex]` as relative percentage.
          return value || "";
        }
      }
    }
  }
});

2. I couldn't reproduce this issue. Could you provide me with example code?

[am-benisha]

I don't know what exactly do you need. So, I'll give all.

HTML

<div class="panel-box shadow-sm mt-3">    
    <div class="panel-title font-weight-light">
        <span class="">
            ${ fa('thermometer') } Current Sprint Health
        </span>
        <span class="float-right pr-4">
            <small>${ sprint_health.get('time_remaining', 0) } days left</small>
        </span>
    </div>
    <div class="panel-body">
        <table class="table table-sm text-sm">
            <tbody>
                <tr>
                    <td class="border-top-0">
                        <canvas id="myChart" height="40px"></canvas> 
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

JS

var ctx = document.getElementById('myChart').getContext('2d');
var data = {
    datasets: [{
            label: 'Not Started',
            data: [${ sprint_health.get('progress', {}).get('not_started', 1) }],
            backgroundColor: "cornflowerblue",
            hoverBackgroundColor: "lightskyblue",
            hoverBorderWidth: 0
        },
        {
            label: 'In Progress',
            data: [${ sprint_health.get('progress', {}).get('in_progress', 5) }],
            backgroundColor: "#FFA000",
            hoverBackgroundColor: "#FFCA28",
            hoverBorderWidth: 0
        },
        {
            label: 'Done',
            data: [${ sprint_health.get('progress', {}).get('done', 30) }],
            backgroundColor: "#46a846",
            hoverBackgroundColor: "mediumseagreen",
            hoverBorderWidth: 0
        },
    ]
};

    
var stackedBar = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
        scales: {
            xAxes: [{
                stacked: true,
                display: false,
            }],
            yAxes: [{
                stacked: true,
                display: false
            }]
        },
        legend: {
            display: true
        },
        barThickness: 5,
        tooltips: {
            mode: 'nearest',
            // position: 'nearest'
        },
        responsive: true, 
        maintainAspectRatio: true,
        plugins: {
            stacked100: { enable: true ,replaceTooltipLabel: false},
            datalabels: {
                display: true,
                align: 'center',
                anchor: 'center',
                formatter: (_value, context) => {
                    const { datasetIndex, dataIndex } = context;
                    const value = context.chart.data.originalData[datasetIndex][dataIndex]
                    // or you can use `context.chart.data.calculatedData[datasetIndex][dataIndex]` as relative percentage.
                    return value || "";
                }
            }
        }
    }
});

Hope this will help debug

[y-takey]

@am-benisha Thanks for the all, and sorry my poor english...

I think you have two ways to display tooltip completely. (or more than)

1. Expanding height of chart.

<canvas id="myChart" height="80"></canvas>

result:

2. Padding side space.

var stackedBar = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: {
      layout: {
        padding: {
            right: 10,
        }
      },
      ...
    }
}

result:

Hope this will help you.

[am-benisha]

Thanks for the help! Option 2 is the one

[y-takey]

By the way,

1. When we hover once over the chart, the label are changing to the right values

It may be hard to fix this issue. it will take a little more time.

[ThomasBrodt]

One additional note for the formatter option above. This statement fails on InternetExplorer10 and the chart gets blank:

const { datasetIndex, dataIndex } = context;

you have to replace it with:

const datasetIndex = context.datasetIndex;
const dataIndex = context.dataIndex;