Problem with minimum size in chartj chart

Question

var config = {
    type: 'radar',
    data: {
        labels: ["Confiança", "Atividade", "Juros", "Condições de financiamento", "Concessões reais", "Atratividade do Financiamento Imobiliário", "Emprego", "Massa salarial", "Atratividade do Investimento Imobiliário", "Insumos", "Lançamentos", "Preço dos imóveis"],
        datasets: [{
            borderColor: 'rgba(79,129,189,1)',
            backgroundColor: "rgba(220,220,220,0.2)",
            pointBackgroundColor: "rgba(79,129,189,1)",
            data: [NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]
        }],
    },
    options: {
        title: {
            display: false,
            text: "Radar Imobiliário",
            fontSize: 20
        },
        legend:{
            display: false
        },
        elements: {
            line: {
                tension: 0.0,
            },
            point: {
                radius:6,
            },
        },
        scale: {
            ticks: {
                display: false
            }
        },
        animation: {
            duration: 50
        },
        responsive: true,
    }
};

window.onload = function () {
    window.myRadar = new Chart.Radar(document.getElementById("GraficoRadar"), config);
};

 * {
            margin:0;
            padding:0;        
 }
body {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   text-align:center;
}

.logo {
    max-height:200px;
    max-width:350px;
    width: auto;
    height: auto;

}
#menu_download {
    margin-top: 5%;
    margin-bottom: 3%;
}

.menu_download ul {
	        padding:0px;
	        margin:0px;
	        list-style:none;
}

.menu_download ul li { 
            display: inline; 
}

/*Cores*/
.color_nota_global {
            color:rgb(70,130,180);
}
.color_ambiente_setor {
               color: #942825;
}
.color_demanda {
             color: #6F8E30;
}
.color_ambiente_macro {
            color: #7fb9c5;
}
.color_credito_imobiliario {
             color: #C36518;
}
.ambiente_setor {
            background-color:rgb(254,125,125);
}
.demanda {
            background-color:rgb(206,234,176);
}
.ambiente_macro {
             background-color:rgb(77,154,170);
}
.credito_imobiliario {
             background-color:rgb(255,224,130);
}
.nota_global {
             background-color:white;
}
.central_nota {
            background-color:rgb(70,130,180);
            color:white;
}

/*Fim cores*/

.gauge_block {
              width: 250px;
              margin-left:auto;
              margin-right: auto;
              padding: 10px;
              text-align: center;
              font-size: 150%;
}
.display_nota_global {
             width:100%;
}

.nota_global .teste {
        position:relative;
        float:left;
        width:35%; 
}
.preview {
               width: 100%;
               text-align:center;
               font-size: 200%;
               margin-left:auto;
               margin-right:auto;
}

.preview_global {
            margin-left: 15%;
}

 #ambiente_setor, #demanda, #ambiente_macro, #credito_imobiliario {
        display:none;
    }

 #preview-ambiente_setor, #preview-demanda,  #preview-ambiente_macro, #preview-credito_imobiliario{
     display:none;
 }

.ambiente_setor, .demanda, .ambiente_macro, .credito_imobiliario{
    display:none;
}


/* 
 Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.
*/

@media (min-width: 769px) and (max-width:1179px) {
   body {
        zoom:1;
    } 
   
   .preview_global {
            margin-left: 1%;
   }

    .col-md-4 {
        width:100%;
    }

  .col-md-2 {
    width:100%;
  }

  .col-md-7 {
    width:100%;
    margin-top:5%;
    margin-bottom:5%;
  }
}

@media (min-width: 1366px) and (max-width: 1649px) {
    body{
        zoom:1;
        width: 80%;
        margin-left:auto;
        margin-left: auto;
    }
   .col-md-2 {
    width:10%;
    margin-top:5%;
    margin-bottom:5%;
  }

  .col-md-7 {
    width:80%;
    margin-top:5%;
    margin-bottom:5%;
  }
  
   #ambiente_setor, #demanda, #ambiente_macro, #credito_imobiliario {
        display:inline;
        width:200px;
    }

     #preview-ambiente_setor, #preview-demanda,  #preview-ambiente_macro, #preview-credito_imobiliario{
         display:block;
     }

    .ambiente_setor, .demanda, .ambiente_macro, .credito_imobiliario{
        display:block;
        width:200px;
    }

    .preview_global {
        margin-left:98px;
    }
}
/*Dispositivos com largura mínima de 1650 pixels. Por exemplo TVs.*/ 
@media (min-width: 1650px) {
  body{
        zoom:1;
        width: 80%;
        margin-left:auto;
        margin-left: auto;
    }
   .col-md-2 {
    width:20%;
    margin-top:5%;
    margin-bottom:5%;
  }

  .col-md-7 {
    width:60%;
    margin-top:5%;
    margin-bottom:5%;
  }
  
   #ambiente_setor, #demanda, #ambiente_macro, #credito_imobiliario {
        display:inline;
        width:100%;
    }

     #preview-ambiente_setor, #preview-demanda,  #preview-ambiente_macro, #preview-credito_imobiliario{
         display:block;
     }

    .ambiente_setor, .demanda, .ambiente_macro, .credito_imobiliario{
        display:block;
        width:100%;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>

<!DOCTYPE html lang="pt-br">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Radar Imobiliário - Gráfico</title>
          
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <link rel="stylesheet" href="css/estilo_handheld.css" type="text/css">
</head>
<body>
    <form id="form1" runat="server">
         <header>
                <div class="container">
                    <div class="row">
                        <div class="col-md-6" >
                                   <div class="row navbar-right" >
                                       <label class="seletor">Selecione o período:</label>
                                         <asp:DropDownList ID="selecaoMes" title="Selecione um mês" runat="server">
                                            <asp:ListItem Value="">Selecione um mês</asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                            </div>
                        </div>
                    </div>
                
                <hr class="seletor">
            </header>

        <section id="conteudo">
        
            <div class="container-fluid">
                <div class="row nota_global">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="teste">
                            <div  class="gauge_block central_nota">Nota global</div> 
                        </div> 
                        <div class="teste preview preview_global color_nota_global" id="preview-nota_global"></div>
                    </div>
                </div>
             <div class="row graficos">
                        <div class="col-md-7 ">
                             <canvas id="GraficoRadar"></canvas>
                        </div>

                </div>
            </div>
        </section>

    </form>

</body>
</html>

The data is loaded correctly as said just can’t do this canvas resize to small size screens.