Killedbygluten Killedbygluten - 1 month ago 12
Javascript Question

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

I am currently in a berlin start up hustleing to get our website up and running and I get by with HTML AND CSS but a big noob when it comes down to Jquery. Anyway I came across Chart.js and would love to visualize our company success by means of a polar area chart. Yet I want to remove the legend and the grey grid/lines in the background.



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>





I dont know how to get the options going to get rid off the background grids/numbers. Does anyone know the command to remove the grids in the background?

Would appreciate your help and probs name my 2nd born after you :)

Love from Berlin,

A

Answer

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>