CODEWITHSUNDEEP
highcharts
Neuroloq1kk
Neuroloq1kk

Reputation: 11

How can I achieve this type of marker in highcharts?

So I need this marker in my highcharts series.

screenshot

Is there anyway I can achieve this?

Upvotes: 1

Views: 564

Answers (2)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can achieve it adding your custom marker:

Highcharts.SVGRenderer.prototype.symbols.custom = function(x, y, width, height) {
  var w = width / 2,
    h = height / 2,
    space = 1.5,
    inner, outer;

  inner = this.arc(x + w, y + h, w - space * 2, h - space * 2, {
    start: Math.PI * 0.5,
    end: Math.PI * 2.5,
    open: false
  });

  outer = this.arc(x + w, y + h, w - space, h - space, {
    start: Math.PI * 0.5,
    end: Math.PI * 2.5,
    innerR: w,
    open: false
  });

  return outer.concat(inner);
};

And using it like that:

plotOptions: {
  series: {
    marker: {
      symbol: 'custom',
      radius: 7
    }
  }
}

Demo:

API reference:

Upvotes: 0

lamtacvu
lamtacvu

Reputation: 685

Yes, you can do it in Highcharts.

  1. You need find image for your marker and set it to your series data: Set marker image
  2. To customize your tooltips you can see it here : Tooltips formatter
  3. You need to set your series hidden your marker and only display it when you hover on it : Show marker on hover

I've made a live example here, hope it helps: Example

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
     chart: {
         backgroundColor: "#000"
     },
     tooltip: {
         positioner: function(boxWidth, boxHeight, point) {         
             return {
                 x:point.plotX + boxWidth / 2 ,
                 y:point.plotY + boxHeight / 2 + 20
             };         
         },
        formatter: function () {
            return ' <b>' + this.x + '</b>';
        },
        borderColor: '#14aaa0',
        backgroundColor: '#14aaa0',
        borderRadius: 9,
        style: {
            color: '#fff'
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        marker: {
            symbol: "url(https://i.imgur.com/akecE8I.png)"
        }
    }]
});

Upvotes: 1

Related Questions