title: Howto combine Highstock (Highcharts) 'addPoint' function with flags
body: <p>Using the Highstock (Highcharts) library, 
  I'm wondering, how do I combine <strong>A)</strong> adding flags as in <a href="http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/flags-shapes/" rel="nofollow noreferrer">here</a> (or see <strong><em>fig.1</em></strong>) with <strong>B)</strong> dynamically updating data, using the <strong><em>addPoint</em></strong> function (ex: <code>series.addPoint([x, y], true, true)</code> <a href="http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/" rel="nofollow noreferrer">see here</a>). There doesn't seem to be a facility for it in the <strong><em>addPoint</em></strong> function. </p>
  
  <pre>
  series : [{
                  name : 'USD to EUR',
                  data : data,
                  id : 'dataseries'
              },
              {
                  type : 'flags',
                  data : [{
                      x : Date.UTC(2011, 3, 25),
                      title : 'H',
                      text : 'Euro Contained by Channel Resistance'
                  }],
                  onSeries : 'dataseries',
                  shape : 'circlepin',
                  width : 16
              }]
  </pre>
  
  <p><strong><em>fig.1</em></strong></p>
  
  <p>I have taken a look at this <a href="https://stackoverflow.com/questions/14302908/adding-flags-to-highcharts-not-highstock-dynamically">SO question</a>. But is seems to add a flag on an existing dataset. Can I add a data point, and an associated flag at the same time? </p>
  
  <p>Any help's appreciated. </p>
  
  <p>Thanks </p>
  
  <p><strong><em>=== EDIT ===></em></strong> </p>
  
  <p>@Sebastian-Bochan</p>
  
  <p>Thanks for responding, and for the working example. However, for some reason, <strong><em>addPoint</em></strong> is not working for my setup. </p>
  
  <p>So take a look at this <strong><a href="http://jsfiddle.net/twashing/cgYm2/" rel="nofollow noreferrer">jsfiddle</a></strong>. What I do is i) setup an initial graph with a call to <code>(chart-fill …)</code>, then ii) call <code>(chart-increment …)</code> which adds 1 point, then immediately tries to add 1 flag on that point. The part that isn't working is <code>(-&gt; ($ selector) (.highcharts) (.-series) (nth 9) (.addPoint { :x 1234567 :title "fubar"} true false))</code>. This isn't adding the flag as I'd expect. </p>
  
  <p>I have 11 Series overlaid on top of 5 graphs. This includes one series of type "flag". I thought, maybe with so many Series, there was a problem referencing one of them. But if I look into my series, I can see that the flag is indeed the 9th one. </p>
  
  <p>I'm also using Clojurescript code. But I don't think that's an issue, as the graph otherwise renders properly. Any ideas? </p>
  
  <p><img src="https://i.stack.imgur.com/PYlwG.png" alt="enter image description here"></p>