waterfall chart customization.
Hi!
This is my figma waterfall chart:
While this what I have prepared using syncfusion so far.
Following are the customizations which I further want:
1- The colour of starting bar should not be that of the positive one. The starting bar should have its own colour which will indicate that it is the starting bar.
2- The data label for the negative bars are on the bottom I want all the data labels on the top weather it is positive value bar or negative value var.
3- The data labels for both the starting and summary bar is bold in my figma. How can I achieve it in syncfusion?
4- The summary bar has one extra-label which the percentage decrease occurred from that of the starting value.
5. How can I get inner shadows for the chart area and for the bars?
Thanks.
Hi Umair,
Greetings from Syncfusion.
Query1: The color of starting bar should not be that of the positive one. The starting bar should have its own color which will indicate that it is the starting bar.
We have analyzed your reported scenario based on that we suggest you to use pointRender event. This will allow you to assign a unique color to the starting bar, distinguishing it from the positive one.
Code-snippet:
|
public pointRender(args): void { if (args.point.index === 0) { args.fill = "#9cc9f8" } }; |
Query2: The data label for the negative bars are on the bottom I want all the data labels on the top weather it is positive value bar or negative value var.
We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our volume 4 release which is scheduled to be rolled out on December 13, 2023. We appreciate your patience until then. You can keep track of the bug from the below feedback link.
Feedback: https://www.syncfusion.com/feedback/48803/waterfall-chart-datalabel-is-not-proper
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.
Query3: The data labels for both the starting and summary bar is bold in my figma. How can I achieve it in syncfusion?
We have analyzed your reported scenario based on that we suggest you to use textRender event , This will bold the dataLabel for starting and summary bar.
Code-snippet:
|
public textRender(args): void { for (let i = 0; i < args.series.chart.series.length; i++) { for (let j = 0; j < args.series.chart.series[i].dataSource.length; j++) { if (args.point.index === 0 || args.point.index === args.series.chart.series[i].dataSource.length - 1) { args.font.fontWeight = "1000"; } } } }; |
Query4: The summary bar has one extra-label which the percentage decrease occurred from that of the starting value.
We recommend displaying the extra label on the summary column by using annotations by specify its x and y values to ensure accurate placement.
Code-snippet:
|
public annotations: ChartAnnotationSettingsModel[] = [ { content: '<div style="color:black; font-size: 11px; font-weight: bold">63%</div>', x: '94%', y: '63%' , region:'Series' } ]; |
Documentation: https://ej2.syncfusion.com/documentation/chart/chart-annotations
Query5: How can I get inner shadows for the chart area and for the bars?
We suggest you to use gradient for the background of the chart and fill for the bar. This combination will result in a shadow-like effect for both the chart and bars. For your convenience, we've provided a sample and code snippet
Code-snippet:
|
< svg width = "200" height = "200" xmlns = http://www.w3.org/2000/svg > < defs > < linearGradient id = "gradient" x1 = "0%" y1 = "0%" x2 = "0%" y2 = "100%" > < stop offset = "0%" style = "stop-color: grey;" /> < !--Red-- > < stop offset = "100%" style = "stop-color: lightgrey" /> < !--Blue-- > </ linearGradient > </ defs > </ svg > < ejs - chart background = 'url(#gradient)' > </ ejs - chart > public pointRender(args): void { if (args.point.index === 0) { args.fill = "#9cc9f8" } else if (args.point.index === 2) { args.fill = "url(#gradient)" } }; |
Screenshot:
Sample: https://stackblitz.com/edit/angular-mzybya-eizfap?file=src%2Fapp.component.ts
Kindly revert us if you have any concerns.
Regards,
Nishanthi
