Having multi colored volume (bar chart) and showing legend

[Ghassen]

I'm trying to show the legend on the chart and having a multi colored bar chart for the volume (bull & bear) but nothing works (no errors).

<ejs-stockchart #stockChart id="chartStock" [enableSelector]=false [enablePeriodSelector]=false theme='Bootstrap' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [axes]='axes' [rows]='rows' [tooltip]='tooltip' [crosshair]='crosshair'

    [zoomSettings]='zoomSettings' [legendSettings]='legendSettings' (axisLabelRender)='axisLabelRender($event)'>

    <e-stockchart-series-collection>

        <e-stockchart-series name="my_volume" [dataSource]="chartData" type='Column' xName='date' yName='volume' volume='volume' yAxisName='volume_axis' [enableTooltip]=false></e-stockchart-series>

        <e-stockchart-series [name]="my_serie" [dataSource]="chartData" type="HiloOpenClose" xName="date" yName='close' Open="open" High="high" Low="low" Close="close" Volume="volume" bearFillColor='#2ecd71' bullFillColor='#e74c3d'>

            <e-trendlines>

                <e-trendline type='Polynomial' width=0 fill='#9D36F1' [enableTooltip]=true></e-trendline>

            </e-trendlines>

        </e-stockchart-series>

    </e-stockchart-series-collection>

</ejs-stockchart>

private legendSettings: LegendSettingsModel;

ngOnInit(){

    this.legendSettings = {

      visible: true,

    };

}

[Srihari Muthukaruppan]

Hi Ghassen, 

 

We have tested the reported scenario and it is working fine. Unfortunately we are unable to reproduce the reported scenario in the latest version 19.2.44 of the chart. Please find the sample used for testing and video for your reference. 

 

Sample: https://stackblitz.com/edit/angular-cbwc88?file=app.component.html 

 

Screenshot: 

 

 

Note: We also suggest you to clear the browser cache before checking the scenario 

 

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner. 

 

1. Try to reproduce the reported scenario in the provided sample.
2. Share the replication procedure for the reported scenario.

 

Regards, 

Srihari M 

[Ghassen]

It's ok with the first part but once you have a legend and want to compare any other serie you get this error (it is working without legend):

ERROR TypeError: Cannot read property 'shape' of undefined

    at StockLegend.getLegendOptions (ej2-charts.es2015.js:37322)

    at StockChartComponent.calculateLegendBounds (ej2-charts.es2015.js:38232)

    at StockChartComponent.drawSVG (ej2-charts.es2015.js:37734)

    at StockChartComponent.<anonymous> (ej2-charts.es2015.js:37687)

    at StockChartComponent.push.kvfV.ComponentBase.trigger (component-base.js:318)

    at StockChartComponent.render (ej2-charts.es2015.js:37683)

    at StockChartComponent.refresh (ej2-base.es2015.js:6870)

    at StockChartComponent.addStockChartSerie (stockchart.component.ts:627)

    at SafeSubscriber._next (stockchart.component.ts:603)

    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)

In other words, if you have legend enabled you can't compare series anymore.

For the second part concerning the bar serie here it's with option fill blue, in this exemple it is either red or green according to the bull & bear color
https://ej2.syncfusion.com/showcase/angular/stockchart/#/stockChart

Something I couldn't reproduce with the stockchart component.

[Durga Gopalakrishnan]

Hi Ghassen, 

  

# 1: if you have legend enabled you can't compare series anymore. 

  

We have ensured by changing the series from dropdown available on toolbar. Chart series legend is also changed as per selected series and it doesn’t thrown any console error. Please specify in which scenario you are facing the reported issue. 

  

# 2 : it is either red or green according to the bull & bear color. 

  

As of now bear fill color and bull fill color is supported only for financial chart types alone.  

  

Kindly revert us if you have any concerns. 

  

Regards, 

Durga G