100% stacked bar for angular doesn't have proper documentation to understand. My requirement is to draw a chart to show how much % amount they spent for college fees for each student. It should be from 0 to 100% in a single bar. Used percentage will be in dark color and remaing will be in white on the same bar chart.
Non working with two series for 85 % ( It should be showing 85 % and chart should start fomr 0 to 100 on horizontal legends but, it starts from 0, Please help me to correct it.
@Component({
selector: 'my-app',
template: `
<kendo-chart >
<kendo-chart-series>
<kendo-chart-series-item type="bar" [color]="chartfillColor" [border]="seriesBorder" [stack]="{ type: '100%' }" [data]="[85]">
</kendo-chart-series-item>
<kendo-chart-series-item type="bar" [color]="mainColor" [border]="seriesBorder" [data]="[15]">
</kendo-chart-series-item>
<kendo-chart-axis-defaults [background]="background"
[color]="color"
[crosshair]="crosshair"
[line]="line"
[majorGridLines]="majorGridLines"
[minorGridLines]="minorGridLines"
[majorTicks]="majorTicks"
[minorTicks]="minorTicks"
[visible]="axisVisible"></kendo-chart-axis-defaults>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public mainColor = "#ffffff";
public chartfillColor = "#4ec2c0"
}
Example 2 (If I have one more dummy series, it works with some space after the first chart.
@Component({
selector: 'my-app',
template: `
<kendo-chart >
<kendo-chart-series>
<kendo-chart-series-item type="bar" [color]="chartfillColor" [border]="seriesBorder" [stack]="{ type: '100%' }" [data]="[85,0]">
</kendo-chart-series-item>
<kendo-chart-series-item type="bar" [color]="mainColor" [border]="seriesBorder" [data]="[15,0]">
</kendo-chart-series-item>
<kendo-chart-axis-defaults [background]="background"
[color]="color"
[crosshair]="crosshair"
[line]="line"
[majorGridLines]="majorGridLines"
[minorGridLines]="minorGridLines"
[majorTicks]="majorTicks"
[minorTicks]="minorTicks"
[visible]="axisVisible"></kendo-chart-axis-defaults>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public mainColor = "#ffffff";
public chartfillColor = "#4ec2c0"
}
4 Answers, 1 is accepted
The 100% stacked bar Chart is meant to display the percentage of each series data point for the respective category. For example if we have two students - John and Jane, and they spend 85% and 65% for them respectively, the first series (amount spent) should contain the values 85 and 65, while the second series should contain the remaining value to 100, e.g. - 15 and 35:
https://stackblitz.com/edit/angular-3h9eyr-g7ac7i?file=app/app.component.ts
However, the stacked bar chart gives us the opportunity to provide proportions (that do need to amount to 100) only, for example a 3 to 2 ratio would automatically be displayed as 60% to 40%, 4 to 1 - as 80% to 20% etc:
https://stackblitz.com/edit/angular-3h9eyr-dwxfex?file=app/app.component.ts (ratios of 17/3 and 13/7 are provided as series data as opposed to 85/15 and 65/35 yielding the same result).
A runnable demo for the StackBar charts is available in the following section of our documentation:
https://www.telerik.com/kendo-angular-ui/components/charts/series-types/bar/#toc-100-stacked-bar
I hope this helps, but if I am missing something, please describe the scenario, the data items, and the desired layout in further details (as well as how it differs from the one, observed in the examples above), so I can try providing a more suitable suggestion based on the specific use case. Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
No, We need this chart for only one person. Doesn't Telerik has any other chart option to display % used for only one person at a time. Our requirement is to use this chart to display % used from his deductible. so, we will always use only one person to draw this chart. Please use the above code that I have mentioned inmy first comment.
IF 100%stacked is not the option, please let me know with other telerik chart that can be used in angular for this purpose. In my scenario, 100%stacked chart is useless then.
Thank you for going in further details, and please excuse me for not understanding what the issue is from the start, but the following line from the initial post got me confused:
"Non working with two series for 85 % ( It should be showing 85 % and chart should start fomr 0 to 100 on horizontal legends but, it starts from 0".
Indeed, the value axis is scaled by default to ensure that when some of the values are very close they are visually distinctive.
To ensure that the value axis will always be from 0% to 100%, you can use the ValueAxis component and set the "min" option of its ValueAxisItemComponent to 0.
Here is the updated example:
https://stackblitz.com/edit/angular-3h9eyr-vnxgjp?file=app/app.component.ts
Let me know whether this matches the requirements.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1