djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Auto Zoom when area is selected in plot

Hi

How can I autozoom into a specific area on the plot, when it's been highlighted using a mouse?

For example, if I have several months of data on the plot and I would like to zoom into an area, which could reflect several hours. At moment my plot has a scroll bar below it. This is good, but I would prefer it I could directly zoom in and out on actual plot.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Auto Zoom when area is selected in plot

Hi there,

If you would like to enable the zoom on mouse select, you just have to set the chart.zoomType option.
Check how it works on a live demo: https://www.highcharts.com/demo/line-time-series
API Reference: https://api.highcharts.com/highcharts/chart.zoomType

Let me know if you have any further questions!
Best regards
Kamil Musiałowski
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Auto Zoom when area is selected in plot

Hi

I got the zoom working, but the reset button is not appearing.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Auto Zoom when area is selected in plot

Unfortunately, I won't be able to help you without looking at your code.

Could you please reproduce your issue in an online editor (i.e JSFiddle?) so that I can work on a solution for you?

Regards!
Kamil Musiałowski
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Auto Zoom when area is selected in plot

Ok

This is my code, below, for some reason, I can not get it working on Fiddle, so it might take a little time to send you the link, but in the meantime if you do notice anything please do let me know.


Code: Select all

  let myChart = HighCharts.stockChart('highcharts', {

        credits: {
          enabled: false
        },
        legend: {
          enabled: true,
          layout: 'horizontal',
          verticalAlign: 'bottom',
          floating: false,

          symbolWidth: 30,
          symbolHeight: 30,
          itemStyle: {
            fontSize: '20px',
            color: "white",
          }

        },
        chart: {
          type: 'line',
          animation: false,
          backgroundColor: '#464340',
          zoomType: 'x'
        },
        rangeSelector: {
          selected: 1,
          inputEnabled: false,
          enabled: false
        },
        title: {
          text: this.plot_title,
          style: { "color": "#ECEAF9", "fontSize": "12px" }
        },
        xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            day: '%e of %b',
          },

          title: {
            text: 'Date',
            style: { "color": "#ECEAF9", "fontSize": "12px" }

          },
          labels: {
            style: { "color": "#ECEAF9", "fontSize": "12px" }
          }

        },
        yAxis: {
          opposite: false,
          title: {
            text: this.plot_yaxis,
            style: { "color": "#ECEAF9", "fontSize": "12px" }
          },
          labels: {
            formatter: function () {
              return (this.value.toFixed(2) ? '' : '') + this.value.toFixed(2);
            },
            style: { "color": "#ECEAF9", "fontSize": "14px" }

          },


        },

        series: [
          {
            boostThreshold: 1,
            color: '#FCB711',
            name: this.series_title_a,
            type: 'spline',
            data: this.datasets[0].data,
            showInNavigator: true,
            lineWidth: 3

          },
          {
            boostThreshold: 1,
            color: '#0089D0',
            name: this.series_title_b,
            type: 'spline',
            data: this.datasets_b[0].data,
            showInNavigator: true,
            lineWidth: 3

          },
          {
            boostThreshold: 1,
            color: '#d00021',
            name: this.series_title_c,
            type: 'spline',
            data: this.datasets_c[0].data,
            showInNavigator: true,
            lineWidth: 3

          },

        ],
        "tooltip": {
          "pointFormat": "<b>{point.y:.2f}</b>",
          "shared": true
        }
      });
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Auto Zoom when area is selected in plot

Hi there,

Here is a minimal working version of your demo:
https://jsfiddle.net/BlackLabel/3tdg06r9/

If you set the zoomtype to 'x' - not showing a reset button is a default Highcharts behavior. That's happening because you can zoom in/out by navigator below the chart.

To enable the reset button, set the zoomtype to 'xy', or use the workaround provided in the GitHub ticket below, if you don't want to use the 'xy' zoom functionality.
https://github.com/highcharts/highcharts/issues/10320

I have applied this solution to the minimal demo, so feel free to use it in your code:
https://jsfiddle.net/BlackLabel/3qc5zwaf/

Let me know if that solves your issue,
Kind regards!
Kamil Musiałowski
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Auto Zoom when area is selected in plot

Thanks

XY, seems to work, but how can I now remove the bottom range bar ?
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Auto Zoom when area is selected in plot

When I am selecting a part of the plot using the mouse, is it possible
1. Diable data tip information , so that when selecting a region it is not obstructed?
2. Change the highlight box from blue to another colour.?

Please see below,
high chart.png
high chart.png (17.99 KiB) Viewed 1001 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Auto Zoom when area is selected in plot

Hi there,

Unfortunately, without looking at your code, I can't tell you what is causing the range to show up, since it's not a default behaviour (as you can see in the demo).

You can style the selection area with the chart.selectionMarkerFill, see links below:
DEMO: https://jsfiddle.net/BlackLabel/gtxony4f/
API Reference: https://api.highcharts.com/highcharts/c ... MarkerFill

Let me know if that is what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”