mariusmuntean / ChartJs.Blazor

Brings Chart.js charts to Blazor
https://www.iheartblazor.com/
MIT License
676 stars 151 forks source link

Set static YAxes ticks in Logarithmic LineChart #176

Closed ian-m-ellis closed 3 years ago

ian-m-ellis commented 3 years ago

Describe your question

I'm trying to the logarithmic y-axis ticks to always display 0, 0.1, 1, 10, 100, 1000, 10000 and 100000 on my line chart. I can set a minimum and maximum for my ticks, but beyond that I can't find a way to control the ticks in between without an equivalent to the yAxes afterBuildTicks property.

Which Blazor project type is your question related to?

Which charts is this question related to?

Linechart

JavaScript equivalent

I have found on stackoverflow someone who achieved this in javascript through afterBuildTicks,

afterBuildTicks = (chartObj) => { const ticks = [1, 10, 100, 1000, 10000, 100000, 1000000]; chartObj.ticks.splice(0, chartObj.ticks.length); chartObj.ticks.push(...ticks); } https://stackoverflow.com/questions/30307801/how-to-assign-a-logarithmic-scale-to-y-axis-in-chart-js

Additional context

In case it's helpful, I'll include the rest of my configurations. I've been using ChartJs.Blazor for a project at school, and am extremely grateful for all the work put in to it!

private LineConfig _config; private Chart _lineChartJs; protected override void OnInitialized() { _config = new LineConfig {

            Options = new LineOptions
            {
                Events = new BrowserEvent[] { BrowserEvent.Click },
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "Title"
                },

                Animation = new Animation
                {
                    Duration = 0
                },

                Responsive = true,
                Scales = new Scales
                {
                    XAxes = new List<CartesianAxis>
                    {
                        new TimeAxis
                        {
                            Distribution = TimeDistribution.Linear,
                            Ticks = new TimeTicks
                            {
                                Source = TickSource.Auto
                            },
                            Time = new TimeOptions
                            {
                                Unit = TimeMeasurement.Week,
                                TooltipFormat = "DD/MM/YYYY"
                            },
                            GridLines = new GridLines
                            {
                                Display = true
                            }

                        }
                    },
                    YAxes = new List<CartesianAxis>
                    {
                        new LogarithmicAxis
                        {
                            Ticks = new LogarithmicTicks
                            {
                                Callback = new JavaScriptHandler<AxisTickCallback>("customJsFunctions.callback"),
                                Min = 0,
                                Max = 100000,

                            },

                        },

                    },

                }
            },

        };
    }
Joelius300 commented 3 years ago

Hey @ian-m-ellis, good question.

If there's no way around afterBuildTicks, there's no way around JavaScript 😅
You should be able to use the SetupCompletedCallback callback to register your afterBuildTicks. As an example for using SetupCompletedCallback, check out the gradient workaround (with this).

Hope that helps 😄

If so, you can close this issue. Best of luck!