CODEWITHSUNDEEP
javascriptjqueryhighcharts
Gopal
Gopal

Reputation: 25

Remove the blue color selection while dragging the mouse to select in highcharts

I want to remove the blue area that appears on chart while using mouse to click and drag and select a particular area. I don't want that selection area that is the blue color box to appear while selecting. please see to this image to find the blue selection area that I am asking

Upvotes: 0

Views: 872

Answers (2)

Jozef Vaclavik
Jozef Vaclavik

Reputation: 549

I see two things here. I bet you are talking about zooming. It would be great if you could post JSFiddle or at least your chart configuration.

  1. If you wanna hide zooming rectangle, but zooming will still be active. Highcharts lets you select color for selectionMarkerFill. You have to enter there rgba function. that takes 0 - 255 for each color and last parameter is opacity. 0 is transparent, 1 is no opacity. Check the doc here

    chart: {
  type: 'scatter',
  zoomType: 'xy',
  selectionMarkerFill: 'rgba(255, 255, 255, 0)'
},

You can see example in JSFiddle

  1. You wanna disable zooming completely. Just remove zoomType: 'xy' and that will disable any selection events.

Upvotes: 2

Ted Nyberg
Ted Nyberg

Reputation: 7401

You could probably use an approach similar to this to prevent the selection from being displayed.

Basically through CSS for your chart area:

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Upvotes: 1

Related Questions