Custom Marker (Rectangle with rounded corner) for highcharts scatter graph

Question

Hi I am trying to use the custom marker with the highchart scatter graph . I am facing some problems

I am unable to render the rectangle with rounder corners .I am getting simple rectangle though.
How can I pass 'w' and 'h' parameters to the custom marker function .?
How is custom marker getting its default parameters ?

Here is what I am able to achieve till now (Fiddle) The Marker I am trying to draw is like enter image description here

Relevant Code

<script>
   $(document).ready(function(){

       var yAxisSeries     = [9.2,7.6,9.6,4.7,9.6,{y:54.4, fillColor:'#FF0000'}];
      var xAxisCategories  = ['speech1','speech2','speech3','speech4','speech5','speech6'];
        // Define a custom symbol path
    Highcharts.SVGRenderer.prototype.symbols.pointer = function (x, y, w, h) {
        return ['M', x, y, 
                'L',x,y-h,x+w,y-h,x+w,y, 
                'L',x+w,y+h,x,y+h,x,y,
                'z'];

    };
    if (Highcharts.VMLRenderer) {
        Highcharts.VMLRenderer.prototype.symbols.pointer = Highcharts.SVGRenderer.prototype.symbols.pointer;
    }


      var chartOptions = {
            chart: {

            }, 

            plotOptions: {
                series: {
                pointWidth: 20
            },
            column: {
                pointPlacement: 'on',
                clip          :false,
                pointWidth    :'30'
            }
        },
            credits: {
               enabled: false
           },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            xAxis: [{
                       gridLineWidth: 2,
                       lineColor: '#000',
                       tickColor: '#000',
                       gridLineDashStyle:'ShortDash',
                       categories:xAxisCategories,
                       gridLineColor:'#000',
                       tickmarkPlacement:'on'
                   }],
            yAxis: [{ // Primary yAxis
                       gridLineWidth: 1,
                       allowDecimals : true,
                       gridLineDashStyle:'ShortDash',
                        gridLineColor:'#9ACD9D',
                       labels: {
                                 style: {
                                     color: '#9ACD9D'
                                 }
                               },
                    }],

           legend: {
                        align: 'left',
                        x: 120,
                        verticalAlign: 'top',
                        y: 100,
                        floating: true,
                        backgroundColor: '#FFFFFF'
                     },
            series: [{
                        name: '',
                        color: '#89A54E',
                        type: 'scatter',
                        data: yAxisSeries,
                          marker: {
                              fillColor: 'red',                           
                              symbol: 'pointer',               
                        },
                        tooltip: {
                            valueSuffix: ''
                        },
                        showInLegend:false
                }]
        };
 $('#test').highcharts(chartOptions);

   })

</script>
<div id="test" style='width:700px'></div>

Any suggestions will be helpful

score 4 · Answer 1 · answered Mar 19 '14 at 12:01

4

You are using path to render rect, then you need to manually set round corners, read more about SVG paths: http://www.w3.org/TR/SVG11/paths.html#PathDataCurveCommands

Working demo: http://jsfiddle.net/56Nh9/1/

Highcharts.SVGRenderer.prototype.symbols.pointer = function (x, y, w, h) {
    return ['M', x, y, 
            'C',x,y-h,x+w,y-h,x+w,y, 
            'C',x+w,y+h,x,y+h,x,y,
            'z'];

};

width and height are calculated as values from radius, see: http://jsfiddle.net/56Nh9/2/

answered Mar 19 '14 at 12:01

Paweł Fus

44,795
3
61
77

Is it possible to apply on the custom url image? – Travis Su Jul 02 '18 at 15:29
I don't understand, how image is connected to path in SVG? – Paweł Fus Jul 02 '18 at 15:40
umm in lastest ver. of HighCharts `marker.symbol` can pass url of the `.png` file to display custom image marker https://api.highcharts.com/highcharts/plotOptions.series.marker.symbol – Travis Su Jul 02 '18 at 18:39
That's correct, so if image has rounded corners (png is a rectangle, but can have rounded corners done as transparent background) then it's ready :) – Paweł Fus Jul 03 '18 at 10:49
That is the issue, I couldn't photoshop the image because I could not access to the backend so I need a alternative – Travis Su Jul 03 '18 at 13:28
There's no easy way to do that in pure SVG. Probably creating a mask and applying it to the image could work. As I said, image should be changed to the one you want to see. – Paweł Fus Jul 03 '18 at 14:20
I have to intercept and mask it outside the chart and pass into it? – Travis Su Jul 03 '18 at 15:42
I would use `marker.symbol` with URL to PNG, then in JS find required images and apply a mask on it. Something like this: https://stackoverflow.com/questions/7430580/setting-rounded-corners-for-svgimage – Paweł Fus Jul 04 '18 at 11:20
I'm able to mask the image on a demo. But, most challenging stuff is, where can I find that required image in JS? `symbol` receives the url and renders on the chart? – Travis Su Jul 06 '18 at 19:55

Custom Marker (Rectangle with rounded corner) for highcharts scatter graph

1 Answers1