const { ValueViewerSymbol } = require("@runkit/value-viewer");
function runkitChartJS(jsFunction){
return {
[ValueViewerSymbol]: {
title: "chart.js",
HTML: `
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>
<script>
(${jsFunction.toString()})(document.getElementById('myChart').getContext('2d'));
</script>
</body>
`
}
}
}
runkitChartJS(function (ctx){
var radarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["Writing", "Typography", "Photography", "Illustration", "Iconography"],
datasets: [{
label: 'Designer A',
data: [4, 3, 3, 1, 4],
backgroundColor: "rgba(145, 149, 255, 0.3)",
borderColor: "rgba(145, 149, 255, 1)",
borderJoinStyle: 'round',
lineTension: 0.5,
},{
label: 'Designer B',
data: [0, 2, 1, 3, 4],
backgroundColor: "rgba(0, 255, 188, 0.3)",
borderColor: "rgba(0, 255, 188, 1)",
borderJoinStyle: 'round',
lineTension: 0.5,
},{
label: 'Designer C',
data: [5, 5, 1, 1, 2],
backgroundColor: "rgba(0, 194, 255, 0.3)",
borderColor: "rgba(0, 194, 255, 1)",
borderJoinStyle: 'round',
lineTension: 0.5,
}]
}
});
});
no comments
sign in to comment