Question 273560 in CSS Question posted in
Some basic documentation can be found here.

Css – Highcharts Flag Series needs to overlay plot border along the top of the chart

I am looking to have a flag series that is at the top of all of the plotLines I have in my chart which would overlay the top edge of the chart. I have gone into the Chrome DevTools and manually changed almost every component within the highcharts component to have overflow: visible set on it and I still could not accomplish this. I have played around with the overflow option that is in several different chart options objects as well as messing with different z-index settings. The end goal of this is to show our end-users a easy-to-see tie between the plotLines and data that we are displaying in a table for notifications and move the tooltip from the plotLines themselves to the flag series tooltip through using the same SVG icon we have set in the table with the different lines (Red and Orange in this instance).
Here is my demo of a simple version of my chart: https://jsfiddle.net/jacobburgo/3sve7x8d/1/

Highcharts.stockChart('container', {
    /** options */

    series: [

    /** 3 other series */

      {
        type: "flags",
        name: "Notifications",
        data: flags,
        color: "#dddf0d",
        linkedTo: ":previous"
      }
    ]

    /** more options */
})

I have search through stack overflow many separate times and there seems to be no question regarding this. The best I found was an old Github issue describing what I am trying to accomplish as a bug.

Tags:

2

Answers


  1. 0

    You can disable clipping for the flag series:

    series: [
  // other series ...
  {
    type: "flags",
    name: "Notifications",
    data: flags,
    color: "#dddf0d",
    linkedTo: ":previous",
    clip: false
  }
]

    See this JSFiddle demonstration.

    Login or Signup to reply.
  2. 0

    Unfortunately, flags cannot be placed so that they are generated outside the plot area. However, you can use SVGRenderer to generate such a flag using a label.

    const flags = [{
    x: 1,
    title: "⚠️",
  },
  {
    x: 3,
    title: "⚠️",
  },
  {
    x: 4,
    title: "⚠️",
  },
  {
    x: 4.5,
    title: "⚠️",
  }
]

Highcharts.chart('container', {
  chart: {
    marginTop: 80,
    events: {
      render: function() {
        const chart = this;

        flags.forEach((flag, i) => {
          const x = chart.xAxis[0].toPixels(flag.x);
          const y = chart.plotTop;
          if (!flag.label) {
            flag.label = chart.renderer.label('⚠️', x + 5, y - 40, 'callout', x, y).attr({
              stroke: 'red',
              'stroke-width': 1,
              padding: 8,
              r: 5,
              zIndex: 6
            }).add();
          } else {
            flag.label.attr({
              x
            })
          }
        })
      }
    }
  },
  series: [{
    data: [2, 5, 2, 3, 6, 5]
  }]
});
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

    Demo: https://jsfiddle.net/BlackLabel/3yc8t2vk/
    API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search