highchartscustomizationshapesmarker

custom shape for stockChart in highcharts

I have a highchart as below in fiddle

https://jsfiddle.net/fedqvuLp/39/

trying to add different shape name as shown below

{
      shape: 'diamond',
      color:'black',
      type: 'flags',
      data: [{
        fillColor:'rgb(255, 97, 0)',
        x: 1426204800000,
        title: 'l1',
      }, {
      fillColor:'rgb(255, 165, 0)',
        x: 1467590400000,
        title: 'l2',
      }]
    }

what should be shape name parameter in the config to get the enter image description here shape

any documentation helps

Eg: 'pin' is not working

Solution

  • You can define your custom shape by adding a new named function to symbols object in SVGRenderer prototype. For example:

    Highcharts.SVGRenderer.prototype.symbols.customSymbol = function(x, y, w, h) {
  const x1 = x + w;
  const y1 = y + h;
  const yBreak = y + 0.75 * h;

  return ['M', x, y, 'L', x1, y, x + w, yBreak, x1 / 2, y1, x, yBreak, 'Z'];
}

    Live demo: https://jsfiddle.net/BlackLabel/xy6ftpn5/

    Docs: https://www.highcharts.com/docs/stock/flag-series