canvas js: how to remove a datapoint dynamically but without creating a “hole” in chart?

Question

After hours and hours playing with canvasJS I couldn't find a way to dynamically remove points from my chart in an elegant way. What I want to do is to allow users to select/deselect data he want to see plotted. For instance, on a chart that shows data from Jan/2014 to Dec/2014 (axis X), if the user choose not to show Feb/2014, I iterate thru dataPoints, remove such point and call render(). The column with data corresponding to February then disappear, but on X axis, the label for February is still shown, creating a "hole". If First or Last item is deselected, then the result is OK, such month is not displayed. I have tried using Date() for x, tried using Integers for x and formatting the Date as a label but none worked for me. So, before starting looking for another solution I would like to know if you guys could help me out figuring what I`m doing wrong. Best regards!!

Answer 1

I have gone through the question and created an example. Here is the JSFiddle

Here is the logic which I used:

for(var i=0; i<dataPoints.length ; i++){
        var dp = dataPoints[i];
        var dataPointMonth = (new Date(dp.label).getMonth());
        if( dataPointMonth !== monthToHide){
            dp.x = index++;
            newDataPoints.push(dp);
        }
}

You can use labels instead of x value in this case and use formatDate method in order to format date values as required and use labelFormatter for further customization.

labelFormatter : function ( e ) {
            return CanvasJS.formatDate( e.label, "MMM");  
}