[Chartjs]-How to remove or color line/grid in polar chart area using Chart.js?

by

2👍

✅

You can simple toggle the display of legend and also the scale, on Graph.js you can pass a options element.

options: {
  legend: {
    display: false
  },
  scale: {
    display: false
  }
}

Check the updated snippet below:

const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{ 
type:'polarArea',
data:{
    labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
     datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Car",
        "Ship",
        "Plane",
        "Spaceship",
        "Cycle"
    ]
},
options: {
  legend: {
    display: false
  },
  scale: {
    display: false
  }
}
    
});
body,html {
  margin: 0;
}
.chart{
	width: 600px;
	height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
	<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>

1👍

Maybe you just forgot the “

const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{ 
type:'polarArea',
data:{
    labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
     datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Car",
        "Ship",
        "Plane",
        "Spaceship",
        "Cycle"
    ]
}
});
body,html {
  margin: 0;
}
.chart{
	width: 600px;
	height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
	<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>

Leave a comment