CODEWITHSUNDEEP
javascriptjquerysvghighchartsbubble-chart
mshaffer
mshaffer

Reputation: 991

Highcharts bubble graph, custom marker

I have a bubble series that I want to use one point in one series as a custom marker. The marker could be a star rendered based on the SVG implementation of HighCharts (5 point-star), or a URL image.

https://assets.mypatentideas.com/images/fiddle/star.png

 series: [{
            //  color: 'red',

         data: [                    
                { x: -0.95, y: 0.54, z: 0.93},
                { x: -0.15, y: 0.14, z: 1,   marker: {
                symbol: 'star'
            }}   

            ]
        },
        {
            //  color: 'red',
            data: [
                { x: 0.95, y: -0.54, z: 0.93},
                { x: 0.15, y: -0.14, z: 1,   marker: {
                symbol: 'starimage'
            } },


            ]
        }]

The idea is introduced here:

https://jsfiddle.net/mshaffer/kx62dztf/

For the image, resize so the w and h is equal to the radius if it were a true bubble. For the SVG star, render so the radius of the star (center to any point) is this same bubble-radius.

Maybe the star needs to be its own series, which is fine.

Few relevant references: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3913511-allow-for-custom-symbols-when-using-bubble-chart which points to http://jsfiddle.net/highcharts/un9faeed/ and http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/renderer/ from http://www.highcharts.com/demo/renderer

Upvotes: 0

Views: 1190

Answers (1)

morganfree
morganfree

Reputation: 12472

The code from the uservoice (allowing different symbols for bubbles) can be combined with the code from the demo with custom markers. You need to define you own shape and then you can use it as a marker symbol.

  Highcharts.SVGRenderer.prototype.symbols.star = function(x, y, w, h) {
return [
  'M', x, y + 0.4 * h,
  'L', x + 0.35 * w, y + 0.35 * h,
  'L', x + 0.5 * w, y,
  'L', x + 0.65 * w, y + 0.35 * h,
  'L', x + w, y + 0.4 * h,
  'L', x + 0.75 * w, y + 0.65 * h,
  'L', x + 0.85 * w, y + h,
  'L', x + 0.5 * w, y + 0.8 * h,
  'L', x + w * 0.15, y + h,
  'L', x + 0.25 * w, y + 0.65 * h,
  'Z'
];
};

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

example: http://jsfiddle.net/un9faeed/3/

example: https://jsfiddle.net/kx62dztf/2/

Upvotes: 1

Related Questions