KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Custom pointstyle in scatterchart/bubblechart (chartjs) #1899

Open Thomas opened this topic on on Feb 11 - 3 comments

Thomas commented on Feb 11

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

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

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

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!

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

ChartJS