JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<canvas id="myChart"></canvas>
JavaScript
var ctx = document.getElementById('myChart').getContext('2d');
axios.get('https://forum.mista.ru/api/message.php?id=848683&to=1000').then(res => {
data = res.data.filter(el => el.vote != 0).map(el => parseInt(el.vote) - 1);
console.log(data);
let accum = [{
label: 'Astahona',
color: '#FF1616'
}, {
label: 'Bagirka',
color: '#1A861A'
}, {
label: 'Love5love',
color: '#0023FF'
}, {
label: 'Odry',
color: '#FF6B18'
}, {
label: 'Pandoch',
color: '#9B3A6E'
}, {
label: 'ponaroshku',
color: '#567655'
}, {
label: 'sxsc',
color: '#233345'
}];
let datasets = accum.map((el, index) => {
let votes = 0;
return {
label: el.label,
borderColor: el.color,
pointRadius: 0,
backgroundColor: 'rgba(0, 0, 0, 0)',
data: data.map(el =>
el == index ? ++votes : votes
)
}
})
console.log(datasets);
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: data.map((el, i) => i),
datasets1: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: data
}],
datasets
},
// Configuration options go here
options: {}
});
})