i used period image in anycharts and wrote event to it and clicking on it showing color Bar

Question

recently for my anycharts graph i used period and kept image in it then in its click event i wrote some business logic and later i found that after click and executing business logic the Period is Highlighted as Orange How to get rid of this and its staying in the screen and its going after we click somewhere on the screen

do any one faced the same issue here is the snap shapshot of event code

private createChopPeriodObject(id: string, eventTime: Date, eventTimeMinuteValue: number,
    noteText: string, userName: string): NoteEventPeriod {
    return {
      id: id,
      start: eventTimeMinuteValue - 30000,
      end: eventTimeMinuteValue + 30000,
      label: { format: ''},
      fill: {
        src: 'assets/img/chop.png',
        mode: 'fit'
      },
      stroke: 'none',
      noteText: noteText,
      userName: userName,
      eventTime: eventTime,
      eventTimeMinuteValue: eventTimeMinuteValue
    } as ChopEventPeriod;
  }

the Chop image is coming as orange upon clicking on it to invoke function

Answer 1

Chart elements support two states: normal and selected. You applied individual settings via data and it works well for a normal state. When a user clicks a period it switches to selected state appearance. In your case. the orange color is the default setting of the selected state. Using the library API you can easily adjust state appearances. For details, check the sample. The idea is to add only image source to the data and the rest of logic implement in a custom fill function that applies in normal and selected states. This guide describes the idea of states. It's based on a Cartesian chart, but the idea is absolutely the same for Gantt charts.