Home Forums Chart Support Drawing defined horizontal lines Reply To: Drawing defined horizontal lines

#37353

@tbates,

The problem is this does not redraw these horizontal lines when I toggle to the next graph(new options are set). Additionally, if I change the size of the browser window, open the inspect tab, or just toggle the zoom button in the toolbar(to the traverse curve option) the horizontal lines we drew disappear. How can I fix this behavior?

You can modify the react chart component to accept a function to redraw the line as prop which will be called whenever the chart options is changed. Also, in order to redraw the lines on toggling the zoom button and on resizing the browser window, you need to add a click event listener to the zoom button and resize event listener on window. Please take a look below for the code snippet on the same.


.
.
.
componentDidMount() {
    if(typeof this.chart !== "undefined") {
      this.calculateValuesInPixel(this.chart);
      this.drawHorizontalLines(this.chart);
      this.chart.container.querySelector(".canvasjs-chart-toolbar button:first-child").addEventListener('click', this.redrawLines)
      window.addEventListener('resize', this.redrawLines );
    }
	} 

  componentDidUnMount() {
    window.removeEventListener('resize', this.redrawLines );
  }

  selectChange = (e) => {
    this.setState({optionIndex: e.target.value})
  }

  onChartUpdate = () => {
    this.calculateValuesInPixel(this.chart);
    this.drawHorizontalLines(this.chart);
  }
.
.
.

Please check out this Stackblitz project for an example on drawing lines on chart and rendering it based on chart options selected from dropdown.

Draw multiple lines on multiple react charts

2) Ideally we would like the annotations to be entirely handled by CanvasJS. If we move forward and make a purchase, would it be possible to add x axes start and end points for Y axes striplines to the library?

It is not possible to add notation as an inbuilt feature as of now. On purchasing the developer license, you get the access for source code which you can modify as per your requirement.

—-
Manoj Mohan
Team CanvasJS