CODEWITHSUNDEEP
highcharts
Duiz
Duiz

Reputation: 15

Highcharts annotations - how to draw rectangle by axis points?

I need to draw a rectangle and other shapes in HighCharts

Going to use a built-in annotations module, but unable to create a simple Rectangle by xAxis & yAxis points

For example - here's the Shape I'm trying to create 

  annotations: [{
    shapes: [{
      type: 'rect',
      points: [
        {
          xAxis: 1,
          yAxis: 20
        }, {
          xAxis: 10,
          yAxis: 20
        }
      ]
    }]
  }]

E.g. I wanna stretch it diagonally from 1:20 to 10:20

By documentation such way may work, but it's not.

Is there any way to do what I want?

Upvotes: 0

Views: 892

Answers (1)

daniel_s
daniel_s

Reputation: 3732

Your shape object isn't defined in correct way, because xAxis and yAxis parameters are used to specify which axes the point will be connected to. Second reason why your implementation is not working is the fact that you didn't specified any height and width values of the shape.

If you would like to draw a rectangle between two points (if I clearly understood your expectations), please use Highcharts.SVGRenderer.rect() function to generate it. You can simply calculate the x and y values of a rect you need to create by Axis.toPixels() value, which converts the axis values to plot pixels values.

Another, and in my opinion the best solution is by creating new fake series, which has only the points for your annotations (and it's unaccessable for users), then create a shape pathtype with all points from that series connected to it. Here is the code and example:

  series: [{
    data: [{
      y: 29.9,
      id: 'min'
    }, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
      y: 216.4,
      id: 'max'
    }, 194.1, 95.6, 54.4]
  }, {
    name: 'Fake annotations points',
    // To make this series hidden and unaccessible for user.
    type: 'scatter',
    marker: {
        enabled: false
    },
    showInLegend: false,
    //
    data: [{
        x: 0,
      y: 29.9,
      id: '1'
    }, {
        x: 0,
      y: 216.4,
      id: '2'
    }, {
        x: 8,
      y: 216.4,
      id: '3'
    }, {
        x: 8,
      y: 29.9,
      id: '4'
    }]
  }],

  annotations: [{
    shapes: [{
      type: 'path',
      points: ['1', '2', '3', '4'],
    }]
  }]
});

Live example: http://jsfiddle.net/quag6ey2/

Upvotes: 1

Related Questions