Hi there!
I’m new to coding and no-coding. I’ve made a report page with a radar chart on it, but it’s messing up the formatting of the page. Anyone able to help me debug what’s happening?
It’s supposed to look like this:
But instead, it’s showing up like this:
I have the code placed in the body element of the page like this and then pull the chart using a div HTML embed:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<style>
/* Add Poppins font to the chart labels */
.chart-label {
font-family: 'Poppins', sans-serif;
color: #b7adac;
}
/* Make the chart responsive to its container */
canvas {
width: 75%;
height: auto;
}
.tf-bg-color {
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #FF0000; /* replace with the color you want */
color: #FFFFFF; /* replace with the text color you want */
font-size: 24px; /* replace with the font size you want */
font-weight: bold; /* replace with the font weight you want */
}
body {
font-family: "Poppins", sans-serif;
}
#linear-gauge {
width: 100%;
height: 100%;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 30%; /* aspect ratio */
vertical-align: bottom;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
left: 0;
}
svg {
min-height: 300px !important;
}
svg text {
font-size: 1.2em;
font-weight: 700;
}
.middleValue {
font-size: 3.4em;
font-weight: 800;
}
.middleText {
font-size: 2.4em;
font-weight: 800;
}
</style>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Question 1', 'Question 2', 'Question 3', 'Question 4', 'Question 5'],
datasets: [{
label: 'Competence',
data: [{{wf {"path":"competence-q1","type":"Number"\} }}, {{wf {"path":"competence-q2","type":"Number"\} }}, {{wf {"path":"competence-q3","type":"Number"\} }}, {{wf {"path":"competence-q4","type":"Number"\} }}, {{wf {"path":"competence-q5","type":"Number"\} }}],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1
}, {
label: 'Consistency',
data: [{{wf {"path":"consistency-q1","type":"Number"\} }}, {{wf {"path":"consistency-q2","type":"Number"\} }}, {{wf {"path":"consistency-q3","type":"Number"\} }}, {{wf {"path":"consistency-q4","type":"Number"\} }}, {{wf {"path":"consistency-q5","type":"Number"\} }}],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1
}, {
label: 'Integrity',
data: [{{wf {"path":"integrity-q1","type":"Number"\} }}, {{wf {"path":"integrity-q2","type":"Number"\} }}, {{wf {"path":"integrity-q3","type":"Number"\} }}, {{wf {"path":"integrity-q4","type":"Number"\} }}, {{wf {"path":"integrity-q5","type":"Number"\} }}],
backgroundColor: 'rgb(44, 160, 44, 0.2)',
borderColor: 'rgb(44, 160, 44)',
borderWidth: 1
}, {
label: 'Compassion',
data: [{{wf {"path":"compassion-q1","type":"Number"\} }}, {{wf {"path":"compassion-q2","type":"Number"\} }}, {{wf {"path":"compassion-q3","type":"Number"\} }}, {{wf {"path":"compassion-q4","type":"Number"\} }}, {{wf {"path":"compassion-q5","type":"Number"\} }}],
backgroundColor: 'rgb(234, 157, 102, 0.2)',
borderColor: 'rgb(234, 157, 102)',
borderWidth: 1
}]
},
options: {
scales: {
r: {
suggestedMin: 1,
suggestedMax: 5,
grid: {
color: '#b7adac'
},
pointLabels: {
font: {
family: 'Poppins',
size: 14
},
color: '#b7adac'
},
ticks: {
stepSize: 1,
beginAtZero: true,
font: {
family: 'Poppins',
size: 14
},
color: '#b7adac'
}
}
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem, data) {
var index = tooltipItem.index;
var value = data.datasets[tooltipItem.datasetIndex].data[index];
var messages = [
'This is the first message',
'This is the second message',
'This is the third message',
'This is the fourth message',
'This is the fifth message'
];
return messages[index] + ': ' + value;
}
}
}
}
});
</script>
Here is my site Read-Only: Webflow - The Attributes
