Chart.js display problem: no

I have a pie chart problem where the container has a display property not present in small devices and I have the following error:

Do not show IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The supplied radius (-0.5) is negative.

my HTML code

<div class="container-fluid charts hidden-xs">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">Annual sales</div>
                <div class="panel-body">
                    <canvas class="annualChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">Visitors per shop</div>
                <div class="panel-body">
                    <canvas class="visitorsChart" width="400" height="400"></canvas>
                    <div id="legend"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">Fans</div>
                <div class="panel-body">
                    <canvas class="annualfanschart" width="400" height="400" ></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">General sales</div>
                <div class="panel-body">
                    <canvas class="generalSalesChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

      

        
        
        
      

    

and my JS code for the pie chart separator (the rest of the lines and histograms)

var data = [
{
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E",
    label: "Men"
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Women"
},
    {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Children",
    }
];
var options = {

animationSteps : 100,

animationEasing : "easeOutBounce",

animateRotate : true,

animateScale : true

}
var ctx = $(".visitorsChart").get(0).getContext("2d");
var myPieChart = new Chart(ctx).Pie(data,{
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for     (var i=0; i<segments.length; i++){%><li><span style=\"background-color:    <%=segments[i].fillColor%>\"></span><%if(segments[i].label){%>    <%=segments[i].label%><%}%></li><%}%></ul>"
});

var legend = myPieChart.generateLegend();
$("#legend").html(legend);

      

        
        
        
      

    

I only face this problem with type pie, other types show no error