How to get the stacked bar chart to always have y-axis start at zero?

jpeaveytrendswell commented 4 years ago

Describe your question

Which Blazor project type is your question related to?

Server-Side

Which charts is this question related to?

StackedBarChart

JavaScript equivalent

this might be an older version, new to all this... var options = { yAxes: [{ ticks: { min: 0, max: 100, stepSize: 20 } }] }

SeppPenner commented 4 years ago

I haven't tested this, but something like

_config = new BarConfig
        {
            Options = new BarOptions
            {
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "Sample chart from Blazor"
                },
                Scales = new BarScales
                {
                    XAxes = new List<CartesianAxis>
                    {
                        new LinearCartesianAxis
                        {
                            BarThickness = BarThickness.Flex,
                            Stacked = true,
                            Ticks = new LinearCartesianTicks
                            {
                                StepSize = 20,
                                BeginAtZero = true,
                                SuggestedMax = 100
                            }
                        }
                    }
                },
                Responsive = true
            }
        };

References:

Joelius300 commented 4 years ago

Good pointers @SeppPenner.

You can use the BeginAtZero property of the Ticks property of your axis. If you need more control over the minimum and maximum value, you can set the Min and Max as well as many others on the Ticks property of your axis.

I don't know your scenario but assuming you want a linear y-axis, you can use code like this (this goes inside the initialization of your BarScales object for the Scales property - see this sample for more):

YAxes = new List<CartesianAxis>
{
    new BarLinearCartesianAxis
    {
        Ticks = new LinearCartesianTicks
        {
            BeginAtZero = true
        }
    }
}

or (the JavaScript example ported)

YAxes = new List<CartesianAxis>
{
    new BarLinearCartesianAxis
    {
        Ticks = new LinearCartesianTicks
        {
            Min = 0,
            Max = 100,
            StepSize = 20
        }
    }
}

Please reopen if this doesn't answer your question :)

jpeaveytrendswell commented 4 years ago

Hi Joel;

Thanks for the response. Yes, I found it on your side bar chart and was able to achieve what I wanted.

Thanks again, I do appreciate the support!

Joe

From: Joel L. notifications@github.com Sent: Friday, July 31, 2020 10:56 AM To: mariusmuntean/ChartJs.Blazor ChartJs.Blazor@noreply.github.com Cc: Joe Peavey jpeavey@trendswell.com; Author author@noreply.github.com Subject: Re: [mariusmuntean/ChartJs.Blazor] How to get the stacked bar chart to always have y-axis start at zero? (#141)

Good pointers @SeppPennerhttps://github.com/SeppPenner.

You can use the BeginAtZero property of the Ticks property of your axis. If you need more control over the minimum and maximum value, you can set the Min and Max as well as many others on the Ticks property of your axis.

I don't know your scenario but assuming you want a linear y-axis, you can use code like this (this goes inside the initialization of your BarScales object for the Scales property - see this samplehttps://github.com/mariusmuntean/ChartJs.Blazor/blob/master/samples/Shared/ChartJs.Blazor.Sample.Shared/Components/BarCharts/SimpleBarChartComponent.razor for more):

YAxes = new List

{

new BarLinearCartesianAxis

{

    Ticks = new LinearCartesianTicks

    {

        BeginAtZero = true

    }

}

}

or (the JavaScript example ported)

YAxes = new List

{

new BarLinearCartesianAxis

{

    Ticks = new LinearCartesianTicks

    {

        Min = 0,

        Max = 100,

        StepSize = 20

    }

}

}

Please reopen if this doesn't answer your question :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/mariusmuntean/ChartJs.Blazor/issues/141#issuecomment-667254606, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQDYHWAWMJBT4RG5ZFJVAX3R6MARNANCNFSM4PPAAD7A.

jpeaveytrendswell commented 4 years ago

Hi Hans;

You are the man!

Thanks so much 😉 Joe

From: HansM notifications@github.com Sent: Friday, July 31, 2020 8:04 AM To: mariusmuntean/ChartJs.Blazor ChartJs.Blazor@noreply.github.com Cc: Joe Peavey jpeavey@trendswell.com; Author author@noreply.github.com Subject: Re: [mariusmuntean/ChartJs.Blazor] How to get the stacked bar chart to always have y-axis start at zero? (#141)

I haven't tested this, but something like

_config = new BarConfig

    {

        Options = new BarOptions

        {

            Title = new OptionsTitle

            {

                Display = true,

                Text = "Sample chart from Blazor"

            },

            Scales = new BarScales

            {

                XAxes = new List<CartesianAxis>

                {

                    new LinearCartesianAxis

                    {

                        BarThickness = BarThickness.Flex,

                        Stacked = true,

                        Ticks = new LinearCartesianTicks

                        {

                            StepSize = 20,

                            BeginAtZero = true,

                            SuggestedMax = 100

                        }

                    }

                }

            },

            Responsive = true

        }

    };

References:

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/mariusmuntean/ChartJs.Blazor/issues/141#issuecomment-667167273, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQDYHWGZANOVGGFA2KFDBSDR6LMNZANCNFSM4PPAAD7A.

SeppPenner commented 4 years ago

Glad to know that we could help you :)

mariusmuntean / ChartJs.Blazor