可滚动canvasjs图表

Question

我正在尝试制作可滚动的垂直canvasjs图表。

这是html：

<div style="height:300px; width: 100%; overflow-y:scroll">
    <div id="dataContainer" style="width: 100%;"></div>
</div>

这是javascript：

var chart = new CanvasJS.Chart("dataContainer",
{  
    title:{
        text: data['name']            
    },
    axisY:{
       gridThickness: 0,
     },           
    data: [{
        animationEnabled: false,
        indexLabelPlacement: "inside",
        indexLabelFontColor: "white",
        indexLabelFontWeight: 600,
        indexLabelFontFamily: "Verdana",
        type: "bar",
        dataPoints: dataPoints[0]
    },
    {
        animationEnabled: false,
        indexLabelPlacement: "inside",
        indexLabelFontColor: "white",
        indexLabelFontWeight: 600,
        indexLabelFontFamily: "Verdana",
        type: "bar",
        dataPoints: dataPoints[1]
    }           
    ]
});

chart.render(); 

这就是结果：

​

​

我添加了dataPointWidth：

var chart = new CanvasJS.Chart("dataContainer",
{  
    dataPointWidth: 20, 
    title:{
        text: data['name']            
    },
 ...
};

这是结果(看起来像一个bug)：

​

如何用滚动条和普通大小的列制作图表？