The problem is that your target canvas does not exist before your firing of the chart script.
Code:
<script type="text/javascript" src="https://www.chartjs.org/dist/2.8.0/Chart.min.js"></script>
<script type="text/javascript" src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script type="text/javascript">
$(document).on('ready pjax:scriptcomplete',function(){
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 8,
max: 16,
count: 8,
decimals: 2,
continuity: 1
};
function generateData() {
// radar chart doesn't support stacked values, let's do it manually
var values = utils.numbers(inputs);
inputs.from = values;
return values;
}
function generateLabels() {
return utils.months( {
count: inputs.count }
);
}
utils.srand(42);
var data = {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: generateData(),
label: 'D0'
}, {
backgroundColor: utils.transparentize(presets.orange),
borderColor: presets.orange,
data: generateData(),
hidden: true,
label: 'D1',
fill: '-1'
}, {
backgroundColor: utils.transparentize(presets.yellow),
borderColor: presets.yellow,
data: generateData(),
label: 'D2',
fill: 1
}, {
backgroundColor: utils.transparentize(presets.green),
borderColor: presets.green,
data: generateData(),
label: 'D3',
fill: false
}, {
backgroundColor: utils.transparentize(presets.blue),
borderColor: presets.blue,
data: generateData(),
label: 'D4',
fill: '-1'
}, {
backgroundColor: utils.transparentize(presets.purple),
borderColor: presets.purple,
data: generateData(),
label: 'D5',
fill: '-1'
}]
};
var options = {
maintainAspectRatio: true,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
},
'samples-filler-analyser': {
target: 'chart-analyser'
}
}
};
var chart = new Chart('chart-0', {
type: 'radar',
data: data,
options: options
});
// eslint-disable-next-line no-unused-vars
function togglePropagate(btn) {
var value = btn.classList.toggle('btn-on');
chart.options.plugins.filler.propagate = value;
chart.update();
}
// eslint-disable-next-line no-unused-vars
function toggleSmooth(btn) {
var value = btn.classList.toggle('btn-on');
chart.options.elements.line.tension = value ? 0.4 : 0.000001;
chart.update();
}
// eslint-disable-next-line no-unused-vars
function randomize() {
inputs.from = [];
chart.data.datasets.forEach(function(dataset) {
dataset.data = generateData();
});
chart.update();
}
});
</script>
<div class="content">
<div class="wrapper" style="max-width: 920px; margin: auto">
<canvas id="chart-0"></canvas>
</div>
</div>
