LineChart X-Axis Labels not appearing!

[Deasun]

Category labels dont appear on the bottom of the grid?

As far as I understood it, it should pick up the names for the label from @strLCCategory

<ChartCategoryAxis Categories="@strLCCategory">

Which has: "2022-07", "2022-08" in it.

What I am getting:

No labels below that 0 line!

Code below

<GridLayoutItem Column="2" Row="5">
            <TelerikChart Height="400px"
                          Width="700px">
                <ChartTitle Text="Line Counts"></ChartTitle>
                <ChartTooltip Visible="true"></ChartTooltip>
                <ChartLegend Position="ChartLegendPosition.Right"></ChartLegend>

                <ChartSeriesItems>
                    <ChartSeries Type="ChartSeriesType.Line"
                                 Name="@strLCSeries1Field"
                                 Data="@LineCounts"
                                 Width="2"
                                 DashType="@DashType.Solid"
                                 Field="@strLCSeries1Field">
                    </ChartSeries>
                    <ChartSeries Type="ChartSeriesType.Line"
                                 Name="@strLCSeries2Field"
                                 Data="@LineCounts"
                                 Width="2"
                                 DashType="@DashType.Solid"
                                 Field="@strLCSeries2Field">
                    </ChartSeries>
                    <ChartSeries Type="ChartSeriesType.Line"
                                 Name="@strLCSeries3Field"
                                 Data="@LineCounts"
                                 Width="2"                            
                                 DashType="@DashType.Solid"
                                 Field="@strLCSeries3Field">
                    </ChartSeries>
                </ChartSeriesItems>

                <ChartCategoryAxes>
                    <ChartCategoryAxis Categories="@strLCCategory">
                        @*<ChartCategoryAxisLabels>
                            <ChartCategoryAxisLabelsRotation Angle="-45" />
                        </ChartCategoryAxisLabels>*@
                    </ChartCategoryAxis>
                </ChartCategoryAxes>

               @* <ChartValueAxes>
                    <ChartValueAxis AxisCrossingValue="@AxisCrossingValue">
                        <ChartValueAxisLabels></ChartValueAxisLabels>
                    </ChartValueAxis>
                </ChartValueAxes>*@

            </TelerikChart>

        </GridLayoutItem>

private string[]? strLCCategory;
 List<chartLineCountsResult> LineCountsResults = new List<chartLineCountsResult>();
 LineCountsResults = clsDataAccessService.doChartInit("LineCounts", GlobalStuff.msDBEnvir);
 List<string> Categories = new List<string>();
 for (int i = 0; i < LineCountsResults.Count; i++)
            {
                Categories.Add(LineCountsResults[i].Periods.ToString());
            };        
 string[] strLCCategory = Categories.ToArray();

Can't see why the Category labels dont appear on the bottom of the grid?
Should be seeing:
2022-07  2022-08

[Stamo Gochev]

Hello Deasun,

I see that the code snippet you sent is very similar to the configuration of the Line Chart demo, which is working as expected, so can you send me a runnable Telerik Blazor REPL example, where your setup can be tested?

I suppose that one of the configuration options is not working for some reason, but I am not able to run the snippet as the "chartLineCountsResult" and "LineCountsResults = clsDataAccessService.doChartInit("LineCounts", GlobalStuff.msDBEnvir);" bits are not present.

Regards,
Stamo Gochev
Progress Telerik

[Deasun]

ok here is the working REPL

 

<h1>Hello, Telerik REPL for Blazor!</h1>

@page "/chart/line-chart"

@using Telerik.Blazor

<TelerikChart>

    <ChartTitle Text="Line Counts"></ChartTitle>

    <ChartTooltip Visible="true"></ChartTooltip>

    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>

        <ChartSeries Type="ChartSeriesType.Line"

                     Name="COX"

                     Data="@Data"

                     Width="2"

                     DashType="@DashType.DashDot"

                     Field="@nameof(ModelData.Series1)">

        </ChartSeries>

        <ChartSeries Type="ChartSeriesType.Line"

                     Name="8x8"

                     Data="@Data"

                     Field="@nameof(ModelData.Series2)">

        </ChartSeries>

        <ChartSeries Type="ChartSeriesType.Line"

                     Name="Granite"

                     Data="@Data"

                     Field="@nameof(ModelData.Series3)">

        </ChartSeries>

        <ChartSeries Type="ChartSeriesType.Line"

                     Name="Level3"

                     Data="@Data"

                     Field="@nameof(ModelData.Series4)">

        </ChartSeries>

        <ChartSeries Type="ChartSeriesType.Line"

                     Name="NiteInc"

                     Data="@Data"

                     Field="@nameof(ModelData.Series5)">

        </ChartSeries>

        <ChartSeries Type="ChartSeriesType.Line"

                     Name="ShenTel"

                     Data="@Data"

                     Field="@nameof(ModelData.Series6)">

        </ChartSeries>

    </ChartSeriesItems>

    <ChartCategoryAxes>

        <ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>

    </ChartCategoryAxes>

    <ChartValueAxes>

        <ChartValueAxis AxisCrossingValue="@AxisCrossingValue">

            <ChartValueAxisLabels Format="{0}"></ChartValueAxisLabels>

        </ChartValueAxis>

    </ChartValueAxes>

</TelerikChart>

@code {

public class ModelData

    {

        public double Series1 { get; set; }

        public double Series2 { get; set; }

        public double Series3 { get; set; }

        public double Series4 { get; set; }

        public double Series5 { get; set; }

        public double Series6 { get; set; }

    }

public string[] Categories = new string[] { "2022-07", "2022-08" };

public object[] AxisCrossingValue = new object[] { -10 };

public List<ModelData> Data = new List<ModelData>()

    {

        new ModelData()

        {

            Series1 = 1131,

            Series2 = 1782,

            Series3 = 282,

            Series4 = 244,

            Series5 = 162,

            Series6 = 52

        },

        new ModelData()

        {

            Series1 = 1149,

            Series2 = 588,

            Series3 = 282,

            Series4 = 205,

            Series5 = 160,

            Series6 = 3

        }

    };

}

----------------------------------------------

I see how the above works. But I dont want to have to hardcode the values and the categories and the series names.

How to I design the sturcture of the dataset so it can feed the Chart on bind the info?

Periods COX EightXEightINC GRANITE LEVEL3 NITELINC SHENTEL
2022-07 1131 1782 282 244 162 52
2022-08 1149 588 282 205 160 69

Thats the structure of the dataset I have coming at me that I am want to attach to the Chart.

Do I have to Build loops to add values into Variables to then link to the chart?

 

 

 

[Stamo Gochev]

Hello Deasun,

Here is a runnable Telerik Blazor REPL example that I created using the above code snippet that you provided:

https://blazorrepl.telerik.com/cQbOOpEy251oeCN636

The labels are displayed as expected now. 

As for how to avoid using hardcoded values - you are correct that a possible approach is to get the dataset (in whatever format you can) and then transform it the way you have done using for loops (potentially you can add "if" checks if other conditions apply, etc.). For example, the loop can add an item to the "Data" collection on each step by creating an instance of the "ModelData" class and assigning the necessary values for each item per each series.