Kendo react - Sparkline stacked bar chart doesn't plot values evenly

0 Answers 69 Views
Forum suggestions
Nithya
Top achievements
Rank 1
Iron
Nithya asked on 16 Nov 2022, 04:58 AM

Hi team,

I'm using Sparkline option to plot 100% stacked bar graph as it has to be very small to fit in my screen.

But I see the values are not plotted evenly as expected

As in the above snap, the 70% and 20% looks almost similar interval. I'm attaching the code below. Kindly help me how to handle this.

<Sparkline type="bar" style={{ cursor: 'pointer', margin: '-10px 0px 0px 9px' }}>
                        <ChartSeries>
                            <ChartSeriesItem
                                labels={{
                                    visible: true,
                                    position: "center",
                                    background: "none",
                                    color: "white",
                                    content: () => "70"
                                }}
                                type="bar"
                                stack={{
                                    type: "100%"
                                }}
                                color="#68D560"
                                data={[70]}
                            />
                            <ChartSeriesItem
                                labels={{
                                    visible: true,
                                    position: "center",
                                    background: "none",
                                    content: () => "20"
                                }}
                                color="#FFC527"
                                type="bar"
                                data={[20]}
                            />
                            <ChartSeriesItem
                                labels={{
                                    visible: true,
                                    position: "center",
                                    background: "none",
                                    color: "white",
                                    content: () => "10"
                                }}
                                color="#EE3124"
                                opacity={0.7}
                                type="bar"
                                data={[10]}
                            /></ChartSeries>
                    </Sparkline>



CSS to adjust width:

.k-sparkline {
        width: 212px !important;
        height: 71px !important;
    }

Vessy
Telerik team
commented on 18 Nov 2022, 05:43 PM | edited

Hi, Nithya, thank you for reporting this issue to us. I managed to reproduce it and will discuss it with the lead Chart dev in order to confirm if it is a bug or a limitation of the Sparkline chart type.

As a possible alternative solution, I can advise you to use a standard chart with hidden axes and "inline-block" displayed mode. For convenience, I have created a sample demonstrating this approach in the link below:
https://stackblitz.com/edit/react-4kn1pl-vvefwt?file=app%2Fmain.tsx 
Nithya
Top achievements
Rank 1
Iron
commented on 26 Nov 2022, 12:37 PM

Hi Vessy,

Thanks . This helps :)

Vessy
Telerik team
commented on 28 Nov 2022, 06:47 AM

Great! You are welcome, Nithya :)

No answers yet. Maybe you can help?

Tags
Forum suggestions
Asked by
Nithya
Top achievements
Rank 1
Iron
Share this question
or