Search code examples
highcharts

highcharts stockChart How to programmatically draw the line tool

How to programmatically draw the line tool? We have a full set of tools: https://www.highcharts.com/demo/stock/stock-tools-gui

That's what I need: https://ibb.co/HnzX7N4

  1. I want to have a button that I press and I can draw a line on my chart. And so that I can edit it. For example, change the color or width:

`

Highcharts.stockChart('container', {
    rangeSelector: {
        selected: 1
    },
    title: {
        text: 'AAPL Stock Price'
    },
    series: [{
        name: 'AAPL Stock Price',
        data: data,
        type: 'spline',
        tooltip: {
            valueDecimals: 2
        }
    }]
});`

jsfiddle

  1. And I also want to have a button so that the line is immediately added to the graph at the specified coordinates tied to X Y. Which can also be edited.

I will be glad of any attention!

Solution

  • You can use the chart.addAnnotation(); method to add an annotation dynamically. And in order to be able to edit these annotations, you must have imported styles annotations/popup.css and modules drag-panes.js and annotations-advanced.js:

    chart.addAnnotation({
  type: 'crookedLine',
  typeOptions: {
    points: [{
      x: 1689984000000,
      y: 175
    }, {
      x: 1692230400000,
      y: 190
    }]
  }
})

    Demo: https://jsfiddle.net/BlackLabel/tnedp0wu/
    API: https://api.highcharts.com/class-reference/Highcharts.Chart.html#addAnnotation