Wide Bar Chart not rendering all bars

[dmitrygalperin]

I'm trying to make a fairly wide Bar chart inside of a scrollable container. Dataset length is around 300, with 3 datasets. . After a certain point, the bars just stop rendering, but hovering over where the bars "should" be still produces a tooltip. Not sure if I am doing something wrong, or if this is some bug.

I noticed that making the width of the chart's parent container smaller allows all of the bars to render, but I am unclear why it is not working with a wider div.

I am using:

react-chartjs-2@2.11.1
chart.js@2.5.0

Example below:

import React from "react";
import ReactDOM from "react-dom";

import { Bar } from "react-chartjs-2";

const DATA_COUNT = 300;

const data = {
  labels: Array(DATA_COUNT)
    .fill(null)
    .map((_, index) => `This Is Label #${index}`),
  datasets: [
    {
      label: "Dataset 1",
      data: Array(DATA_COUNT)
        .fill(null)
        .map(() => Math.floor(Math.random() * 101))
    },
    {
      label: "Dataset 2",
      data: Array(DATA_COUNT)
        .fill(null)
        .map(() => Math.floor(Math.random() * 101))
    },
    {
      label: "Dataset 3",
      data: Array(DATA_COUNT)
        .fill(null)
        .map(() => Math.floor(Math.random() * 101))
    }
  ]
};

ReactDOM.render(
  <div style={{ overflowX: "scroll" }}>
    <div
      style={{ width: DATA_COUNT * 50 * 3, height: 600, position: "relative" }}
    >
      <Bar
        data={data}
        options={{ responsive: true, maintainAspectRatio: false }}
      />
    </div>
  </div>,
  document.getElementById("root")
);

Codesandbox: https://codesandbox.io/s/react-chartjs-2-example-forked-5ri8k?file=/src/index.js:0-998

[owenduncansnobel]

It is hard to try and diagnose, from the code pen it works as intended and renders correctly.

https://imgur.com/a/gu7rQU8

[dmitrygalperin]

It is hard to try and diagnose, from the code pen it works as intended and renders correctly.

https://imgur.com/a/gu7rQU8

Very strange. I've tried on 4 different machines all running Win10 and the most up to date version of Chrome and Edge, and on 3 of them it didn't work, but on one of them it did.

[dmitrygalperin]

Also, I noticed that it stops rendering the bars after exactly 16,384px of width, which is probably not a coincidence. But, the chart area is still well within the maximum area allowed by the Canvas API, and gridlines continue to render past 16,384px as well.

[dmitrygalperin]

Looks like this is not an issue with this library, but with chart.js itself. The bug is present in chart.js 2.5.0 or above. Going to close this issue in favor of the one I submitted on Chart.js repo: chartjs/Chart.js#8309