Igx-financial-charts : Is there a way to add a dialog when clicked on a particular callout if there are different callouts at at one particular index

[amitmoondra]

Question

Is there a way to set different designs for callouts, so in my case I have multiple callouts at a particular time in one series.
I want the ability to give them separate CSS styling.
Currently, I can only give them a different label.

Is there a way I can show different dialog when hovering/clicked over different callouts,
this essentially is needed for me to give users the ability to get into more brief info of the callouts and also give a link for redirection.

Please let me know your input.

[mddifilippo89]

Hello,
1)
I suggest using the IgxDataChart with the Financial Series. You may already be doing this if you are using multiple callouts. Please clarify if you are or not. In order to style individual callouts you'll need to separate out each callout layer with its own datasource. See attached.
axis-annotations-corner-radius.zip

2. Hook the chart's seriesMouseLeftButtonDown and it will provide unique details on the clicked callout compared to the underlying item.

eg.

public ngAfterViewInit(): void {

    if (this.chart !== undefined ) {
        this.chart.seriesMouseLeftButtonDown.subscribe((e: IgxDataChartMouseButtonEventArgs) =>
            this.onSeriesMouseLeftButtonDown(this.chart, e)
        );
    }
}

public onSeriesMouseLeftButtonDown(chart: IgxDataChartComponent, args: IgxDataChartMouseButtonEventArgs){
    let v = args.item as CountryRenewableElectricityItem;
    console.log(args);
}

[mddifilippo89]

From sample attached

[amitmoondra]

Checking this now, will let you know if this solves my purpose.