1. Home
  2. Forum
  3. Angular - EJ 2
  4. Gradient Color in Funnel Chart

Gradient Color in Funnel Chart

Hi Team,

I want to apply gradient color in entire Funnel chart and not for its segment differently, Could you help me with the solution?

Please find the attached screenshot for the expected behavior.

Also I want the label inside and outside of the funnel chart as shown in the image, is it possible with the current properties of funnel? or is there any other solution for this?

Thanks & Regards,
Khushboo

Attachment: New_folder_bfdbcae0.zip

5 Replies 1 reply marked as answer
DG Durga Gopalakrishnan Syncfusion Team January 18, 2021 11:40 AM UTC

Hi Khushboo,

We have analyzed your queries. Since, we have rendered each segment as separate path, we don't have support to apply single color for all segments. You can place data labels either inside or outside. Both cannot be performed using data labels. Instead, you can use annotations to customize the text as per your requirement.


UG Links: 

Please revert us if you have any questions.

Regards,
Durga G



Marked as answer
KH Khushboo January 21, 2021 06:30 AM UTC

Thanks Durga,

But there is one more thing, can you let me know if there is one more parameter with dataSource object where I can store information and later can access it?

For example we have data properties such as X, Y and Text --> {x: "India", y: 133, text: "India"}, Is there any other property along with this 3 in order to access other information? 

Regards,
Khushboo

DG Durga Gopalakrishnan Syncfusion Team January 23, 2021 02:30 PM UTC

Hi Khushboo,

Yes, we have an option to store extra parameter in a dataSource, but we don't have any property to access those parameters, instead you can access its values using events. For an example, in textRender event, we have appended the percent parameter value to text argument.


Please revert us if you have any concerns.

Regards,
Durga G


NI Nikhil January 28, 2021 06:32 AM UTC

Hi ,

What if I want to keep percent on next line , how to break it .

so for eg.  India 
                 30%

DG Durga Gopalakrishnan Syncfusion Team January 29, 2021 12:24 PM UTC

Hi Nikhil,

You can pass collection of strings as array to text argument in textRender event. We have modified sample and attached for your reference.

public textRender(args: IAccTextRenderEventArgs): void {
    args.text = [args.text, args.series.dataSource[args.point.index].percent];
  }



Sample : https://stackblitz.com/edit/angular-z16psr-gipxcu

Regards,
Durga G


Loader.
Up arrow icon