我已经给你做了一个demo页面，告诉你我是如何让我的charjs响应的。
基本上，您需要给予<canvas>元素height:100%并传递以下选项：

options: {
  maintainAspectRatio : false
}

根本不要使用responsive: true，它似乎什么也不做。
如果您的<canvas>位于某个容器中，我建议使该容器具有响应性（例如，使用flexbox）。

我在我的Nextjs应用程序上也遇到了同样的问题。我的条形图在移动的视口上没有正确渲染。
我仔细阅读了主要的ChartJS docs on responsiveness，其中有一部分谈到了当容器调整大小时调整图表画布的大小。在我的例子中，容器只是一个div。因此，为了解决移动的视口上的问题，我将div设置为相对位置，还设置了视图宽度和高度，但它会扰乱桌面屏幕上的chartjs渲染，因此我有一个CSS样式，重置了我的高度和width在大于767px的屏幕上设置为自动。
另外，我根据chartJS文档设置了选项maintainAspectRatio : false。

# canvas-container {

    height: 60vh;
    width: 60vw;
    position: relative;
 }

 @media (min-width: 768px) {
     #canvas-container {
         height: auto;
         width: auto;
      }
 }

<div id="canvas-container">
 <Bar options={options} data={data}/>
</div>

不要忘记设置选项maintainAspectRatio : false
您可以从ChartJS Docs here中查看主要示例。希望这对您有所帮助：）