Custom pointstyle in scatterchart/bubblechart (chartjs)

Thomas commented on Feb 11, 2021

Hi, I would like to change the pointStyles to icons (e.g. fontawesome). With the following code it is possible to change the pointstyle to an image. But I can't figure out, how to change it to an icon. Maybe you could help me with that.

"series"=>array(
            array("gesamt-x-mw","gesamt-y-mw","gesamt-radius",array(
               "pointStyle"=> "function() {
                        var yourImage = new Image();
                        yourImage.src ='https://www.w3schools.com/images/lamp.jpg';
                        
                        return yourImage;
                    }()",
            )),

David Winterburn commented on Feb 15, 2021

Hi Thomas,

I'm not sure about the text icons of FontAwesome but maybe you could try the svg icons as source for your pointStyle's img object:

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

Let us know if you have any issue with this approach. Thanks!

Thomas commented on Feb 17, 2021

The svg is showing but I can't change anything. The size and color are fixed, so I can't really use this.

var yourImage = new Image();
                        yourImage.src ='https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/solid/calendar.svg';
                        yourImage.style.fill = 'red'; // doesn't work
                        yourImage.className  = 'changeicon'; // doesn't work
                        yourImage.style.height = '100px'; // doesn't work
                        yourImage.style.width = '100px'; // doesn't work
                        
                        return yourImage;

All my tries to implement a svg, didn't work. Do you see another solution?

David Winterburn commented on Feb 19, 2021

Hi Thomas,

It seems the image style wouldn't work if it's not attached or displayed. Thus, please try the following method:

<!-- report.view.php -->
<div style="visibility:hidden;">
  <img id="pointStyle" src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/solid/calendar.svg" style="width: 10px; height: 10px">
</div>

<script>
var imgElement = document.getElementById('pointStyle');

</script>

//render chart here
    ...
    pointStyle: "function(){ return imgElement; }()",
    ...

One notice though, I don't think svg image has a color fill style:

To change any SVGs color

Let us know if you have any issue. Thanks!

KoolReport's Forum

Custom pointstyle in scatterchart/bubblechart (chartjs) #1899

Build Your Excellent Data Report