title: HighStock HighCharts Setting Flag on Click Event
body: <p>I'm using the HighStock version of HighCharts to create a series of data in charts.  I've got a candlestick graph, on top of a bar graph, on top of a histogram.  The candlestick points are clickable.  I want to add a flag to the point on the candlestick chart that they just clicked on.  </p>
  
  <p>Here is some of the code I've tried playing with:</p>
  
  <pre><code>// create the chart
          chart = new Highcharts.StockChart({
              chart: {
                  renderTo: 'container',
                  alignTicks: false
              },
  
              rangeSelector: {
                  selected: 1
              },
  
              title: {
                  text: 'DJIA Historical'
              },
  
              yAxis: [{
                  title: {
                      text: 'OHLC'
                  },
                  height: 300,
                  lineWidth: 2
              }, {
                  title: {
                      text: 'Volume'
                  },
                  top: 400,
                  height: 100,
                  offset: 0,
                  lineWidth: 2
              }, {
                  title: {
                      text: 'MACD'
                  },
                  top: 520,
                  height: 100,
                  offset: 0,
                  lineWidth: 1
              }],
  
              series: [{
                  type: 'candlestick',
                  name: 'DJIA',
                  data: ohlc,
                  events: {
                      click: function(event) {
  
                          console.log(chart);
                          chart.series[6].setData(event.point);
                      }
                  },
                  dataGrouping: {
                      units: groupingUnits
                  }
              }, {
                  type: 'column',
                  name: 'Volume',
                  data: volume,
                  yAxis: 1,
                  dataGrouping: {
                      units: groupingUnits
                  }
              }, {
                  type: 'column',
                  name: 'Histogram',
                  pointPadding: 0,
                  groupPadding: 0,
                  data: histogram,
                  yAxis: 2,
                  color: '#666666'
              }, {
                  type: 'line',
                  name: 'MACD',
                  pointPadding: 0,
                  groupPadding: 0,
                  data: macd,
                  yAxis: 2,
                  color: '#0000FF'
              }, {
                  type: 'line',
                  name: 'Signal',
                  pointPadding: 0,
                  groupPadding: 0,
                  data: signal,
                  yAxis: 2,
                  color: '#000000'
              }, {
                  type: 'flags',
                  name: 'Active Point',
                  data: [],
                  onSeries: ohlc,
                  shape: 'squarepin'
              }]
          });
      })
  </code></pre>
  
  <p>The chart doesn't throw any JavaScript errors, but it's not creating the flag.  At the very least, it's not showing it.  I want to essentially have it draw the flag over the candlestick they clicked.  If they click another spot, I want to remove the old flag and draw a new one on the new point.  I figured this was best done by adding and removing data from the series but haven't had much luck.</p>
  
  <p>Any help on this would be greatly appreciated!</p>