How to drag the axis stripline in Angular Charts?

Description

This article shows how to drag the axis stripline in Angular Charts by using the mouse events.

Solution

A stripline can highlight or denote a specific range or segment of a chart. You can customize the stripline by using the stripLines property in the axis.

You can initialize a boolean variable to decide whether the stripline should be dragged. In the chartMouseDown event, you can check whether the target element is stripline and enable the boolean variable. When the mouse up the target, the chartMouseUp event gets triggered and the boolean variable is set as false. In the chartMouseMove event, the value is calculated based on the mouse position, and then the calculated value is added to the stripline start and end values. Finally, the calculated value is set to the start and end property of the stripline.

Code Snippet

app.component.html

       <ejs-chart (chartMouseDown)='mouseDown($event)' (chartMouseMove)='mouseMove($event)'                     (chartMouseUp)='mouseUp($event)'>
           <e-series-collection>
               <e-series [dataSource]='series1' type='Line' xName='x' yName='y' name='Product X'>                  </e-series>
           </e-series-collection>
       </ejs-chart>

app.component.ts

   public mouseDown(args: IMouseEventArgs): void{
       if(args.target == "charts_stripline_Behind_rect_primaryYAxis_0"){
           this.stripEle = document.getElementById("charts_stripline_Behind_rect_primaryYAxis_0");
           this.isMouseDown = true;
       }
   };
   public mouseMove(args: IMouseEventArgs): void{
       if(this.isMouseDown){
           let mouseX = args.x;  
           let mouseY = args.y;  
           let xAxis = this.chart.series[0]["xAxis"];
           let yAxis = this.chart.series[0]["yAxis"];
           let rect = this.chart.series[0]["clipRect"];
           let xVal = mouseX - rect.x;
           let yVal = mouseY - rect.y;
           let xSize = rect.width;
           let ySize = rect.height;
           let actualXValue  = !xAxis.isInversed ? xVal / xSize : (1 - (xVal / xSize));
           actualXValue = actualXValue * (xAxis.visibleRange.delta) + xAxis.visibleRange.min;
           let actualYValue = yAxis.isInversed ? yVal / ySize : (1 - (yVal / ySize));
           actualYValue = actualYValue * (yAxis.visibleRange.delta) + yAxis.visibleRange.min;
           // for horizontal stripline
           this.chart.primaryYAxis.stripLines[0].start = Math.round(actualYValue);
           this.chart.primaryYAxis.stripLines[0].end = Math.round(actualYValue) + 0.2;
           this.chart.dataBind();
       }    
   };
   public mouseUp(args: IMouseEventArgs): void{
      this.isMouseDown = false;
   };

The following image illustrates the output of the above code.

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to drag the axis stripline in Angular Charts.

You can refer to our Angular Charts feature tour page to learn about its other features and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Charts example to understand how to create and visualize data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!