ChartJS折线图在某些情况下带有边缘的图形异常

Question

我会给这个问题一个更好的标题，但老实说我不知道​​如何形容。最好的方法是显示相同的图形两次渲染（最后添加一个数据点）：

第一个图像（边缘上的怪异光标悬停在数据点上）：

第二张图像（突出显示相同的数据点，但形状不同）：

什么可能导致这种看似随机的行为？

一些信息：

• 使用Charjs 2.7.3（最新版本）

• 包含图表的HTML通常是通过AJAX调用加载的。

• 呈现这些图表的页面最多可以包含35个Chart.js折线图

• 在每次页面加载之间，悬停的数据点之间的点不会改变。

我的图表配置：

var config = {
    type: 'line',
    data: {
        labels: date_array,
        datasets: [{
          label: "views",
          data: {{value.y_vals}},
          fill: false,
          borderColor: "#B1B6BA"
        }]
    },
    options: {
        animation: {
          duration: 0
        },
        elements: {
            point: { radius: 0 }
            },
        layout: {
            padding: {
                right: 20,
                bottom: 50
            }
        },
        legend: {
            display: false
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        hover: {
            mode: 'index',
            intersect: false
        },
        scales: {
            xAxes: [{
                display: false,
                gridLines: {
                drawBorder: false
                }
            }],
            yAxes: [{
                display: true,
                gridLines: {
                drawBorder: false,
                display: false
                }
            }]
        }
    }
    };