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

[Nithya]

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]

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]

Hi Vessy,

Thanks . This helps :)

[Vessy]

Great! You are welcome, Nithya :)