I can't figure out for the life of me why when I add a funnel chart to my chartjs charts all of the charts become compressed distorted upon loading. Whenever I resize the page the charts snap back to how I would expect them to load. Thanks for the help.
https://jsfiddle.net/nmp0tfh1/1/
require.config({
paths: {
chart: "//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min",
datalabels: "//cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.3.0/dist/chartjs-plugin-datalabels.min",
gauge: "//unpkg.com/chartjs-gauge@0.2.0/dist/chartjs-gauge.min",
funnel: "//cdn.jsdelivr.net/npm/chartjs-funnel@1.0.5/dist/chart.funnel.min"
},
map: {
datalabels: {
"chart.js": "chart"
},
gauge: {
"chart.js": "chart"
},
funnel: {
"chart.js": "chart"
},
}
});
require(["chart", "datalabels", "gauge", "funnel"], function(chart) {
var ctx = document.getElementById("chart").getContext('2d');
var chrt = new chart.Chart(ctx, {
type: 'gauge',
data: {
labels: ['Red', 'Yellow', 'Green'],
datasets: [{
data: [25, 50, 75],
value: 55,
backgroundColor: ['red', 'yellow', 'green'],
borderWidth: 2
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Gauge chart with datalabels plugin displaying labels'
},
layout: {
padding: {
bottom: 30
}
},
needle: {
// Needle circle radius as the percentage of the chart area width
radiusPercentage: 2,
// Needle width as the percentage of the chart area width
widthPercentage: 3.2,
// Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
lengthPercentage: 80,
// The color of the needle
color: 'rgba(0, 0, 0, 1)'
},
valueLabel: {
display: false
},
plugins: {
datalabels: {
display: true,
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
//color: function (context) {
// return context.dataset.backgroundColor;
//},
color: 'rgba(0, 0, 0, 1.0)',
//color: 'rgba(255, 255, 255, 1.0)',
backgroundColor: null,
font: {
size: 20,
weight: 'bold'
}
}
}
}
});
var ctx = document.getElementById("chart1").getContext('2d');
var chrt = new chart.Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [30, 60, 90],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}],
labels: [
"Red",
"Blue",
"Yellow"
],
},
options: {
responsive: true,
title: {
display: true,
text: "chart title"
},
},
});
var ctx = document.getElementById("chart2").getContext('2d');
var chrt = new chart.Chart(ctx, {
type: 'funnel',
data: {
datasets: [{
data: [30, 60, 90],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}],
labels: [
"Red",
"Blue",
"Yellow"
],
},
options: {
responsive: true,
title: {
display: true,
text: "chart title"
},
},
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
<canvas id="chart1" width="400" height="400"></canvas>
<canvas id="chart2" width="400" height="400"></canvas>
