0

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

mshaffer
  • 959
  • 1
  • 9
  • 19
  • 1
    So, the one thing I am not seeing in this post is an actual question. You have listed some of the references I might have posted in response, so we need to know what you have worked out based on those references, and what - specifically - you are looking for help with. – jlbriggs Dec 14 '16 at 21:12
  • "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." HOW TO MAKE A CUSTOM MARKER FOR HIGH CHARTS BUBBLE EITHER AS AN IMAGE OR A SVG? – mshaffer Dec 15 '16 at 11:02
  • This has a homework smell about it. Looks like the OP text is verbatim from some assignment. You can check the API docs on `marker` that should get you going. – wergeld Dec 15 '16 at 12:28
  • I would guess that you're better off using a scatter series. Look for the multitude of examples of making a custom marker in general, and provide the radius for each marker in the point objects in your data. – jlbriggs Dec 15 '16 at 13:28
  • @wergeld, homework really, you still in grade school – mshaffer Dec 16 '16 at 13:36

1 Answers1

1

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/

morganfree
  • 12,254
  • 1
  • 14
  • 21
  • Nice example. What about a URL symbol; e.g., a PNG? – mshaffer Dec 16 '16 at 13:38
  • here is some code to generate any regular polygon in replace of a circle ... sides > 3, radius is the same as a circle would have: – mshaffer Apr 24 '17 at 09:41
  • $points = array(); for($a = 0;$a <= 360; $a += 360/$sides) { $points[] = $x + $radius * cos(deg2rad($a)); $points[] = $y + $radius * sin(deg2rad($a)); } – mshaffer Apr 24 '17 at 09:41
  • https://wizard.mypatentideas.com/r/online.nnp/d40b32871ec7a4755e912f781222b190/2e153dc325e98060fb2456068859267ca77d727c825bb9f3401f6d25414691ee26a5294e9c19/ae9f5ea6b1e30759575a0afd5045d0fca934557d380f78c60aa4f4c1984b6f45a4ae0fa34502d9a8015b/ – mshaffer Apr 24 '17 at 09:47
  • my link above, the legend doesn't seem to behave as expected. Any thoughts? – mshaffer Apr 24 '17 at 09:47