chartjs-plugin-style
chartjs-plugin-style copied to clipboard
Background image not working on polar chart
Hello... fantastic plugin. Bevels and shadows are so cool!
I am trying to get image working but keep getting an error on: TypeError: Argument 1 of CanvasRenderingContext2D.createPattern could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.
contains tags for Chart.min.js and chartjs-plugin-style.min.js
......
var my_data; my_data = ['', '', '', '', '', '', '', '']; var backgroundColor = 'white'; var img = new Image(); img = 'myimg.png'; var ctx = document.getElementById('birdsChart').getContext('2d');
birdsCanvas = document.getElementById("birdsChart");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var birdsData = {
labels: ["field1", "field2, "..."],
datasets: [{
data: my_data,
bevelWidth: 1,
bevelHighlightColor: 'rgba(255, 255, 255, 0.75)',
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)',
hoverInnerGlowWidth: 20,
backgroundOverlayColor: ctx.createPattern(img, 'repeat'),
backgroundOverlayMode: 'multiply',
hoverOuterGlowWidth: 20,
hoverOuterGlowWidth: 'rgb(255, 255, 0)'
}],
backgroundColor: [
"#e02d29",
"#ee9128",
"#f6ec30",
"#1c9e50",
"#2e3386",
"#8a2a86",
"#ff0000",
"#000000",
],
};
var chartOptions = {
startAngle: -Math.PI / 4,
legend: {
position: 'top'
},
tooltip: {
enabled: 'true'
},
tooplips: {
bevelWidth: 1,
bevelHighlightColor: 'rgba(255, 255, 255, 0.75)',
bevelShadowColor: 'rgba(0, 0, 0, 0.5)',
shadowOffsetX: 1,
shadowOffsetY: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
scale: {
ticks: {
min: 0,
max: 10,
stepSize: 1
}
},
animation: {
animateRotate: false
},
maintainAspectRatio: false,
responsive: true,
title: {
display: true,
text: 'My Polar Chart',
fontSize: 21,
fontColor: '#0000ff',
}
};
img.onload = function() {
var polarAreaChart = new Chart(ctx, {
type: 'polarArea',
data: birdsData,
options: chartOptions
});
};
</script>
I got it working using the example... Is it possible to have a transparent image on top of whatever colors I set?
In the following example, all labels have blocks as the bG image. I would like to keep some colors for each label and supplement it with a transparent image. is that possible?
Thanks
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
Testing...
<div style="width:580px; margin:auto;">
<canvas id="chart5"></canvas>
</div>