search

nagix / chartjs-plugin-style

Chart.js plugin for more styling options
MIT License
66 stars 19 forks source link

Background image not working on polar chart #10

Open rajan77 opened 4 years ago

rajan77 commented 4 years ago

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 }); };
rajan77 commented 4 years ago

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>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>

Testing...

          <div style="width:580px; margin:auto;">
          <canvas id="chart5"></canvas>
        </div>