Hi, I can't figure how to use the Min/Max properties of the ChartCategoryAxis because if I set these properties, the chart disappears.

Please help me.

@page "/"

<TelerikChart>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="Test" Data="@mesures"
                     Field="@nameof(Mesure.Value)" CategoryField="@nameof(Mesure.Date)" Aggregate="ChartSeriesAggregate.Sum">
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <!-- This is OK -->
        @*<ChartCategoryAxis BaseUnit="ChartCategoryAxisBaseUnit.Hours" Type="ChartCategoryAxisType.Date" BaseUnitStep="1"></ChartCategoryAxis>*@

        <!-- This isn't : nothing is displayed -->
        <ChartCategoryAxis Min="@MinDate" Max="@MaxDate" BaseUnit="ChartCategoryAxisBaseUnit.Hours" Type="ChartCategoryAxisType.Date" BaseUnitStep="1"></ChartCategoryAxis>
    </ChartCategoryAxes>

</TelerikChart>

@code {

    private DateTime MinDate { get; set; } = new DateTime(2019, 01, 01, 13, 0, 0);
    private DateTime MaxDate { get; set; }   = new DateTime(2019, 01, 01, 17, 0, 0);

    public class Mesure
    {
        public DateTime Date { get; set; }
        public int Value { get; set; }
    }

    public List<Mesure> mesures = new List<Mesure>()
    {
        new Mesure() { Date = new DateTime(2019, 01, 01, 13, 0, 0), Value = 1 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 14, 0, 0), Value = 2 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 14, 30, 0), Value = 3 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 14, 35, 0), Value = 4 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 15, 0, 0), Value = 5 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 16, 0, 0), Value = 6 },
        new Mesure() { Date = new DateTime(2019, 01, 01, 17, 0, 0), Value = 7 },
    };
}

The Chart Tooltip does not render correct values for the data points when the chart is bound to a model, has multiple series and Template is used. The DataItem does not seem to work as expected.

ADMIN EDIT:

If the Chart is bound with Independent Series Binding the FormattedValue will get the correct values.

If the Chart has no Template the correct values for the data points will be displayed

I would like a polar area chart.

Instead of

I want to have circular lines:

Expose colored ranges (Plot Bands) to allow highlighting certain areas in the chart plot area - similar to https://demos.telerik.com/kendo-ui/bar-charts/plotbands.

---

ADMIN EDIT

---

This feature will allow you to define certain color ranges in the plot area. If you are looking for ability to color the whole plot area in alternating way, you may check this feature request - Is it possible to change the plot area background color in an alternating way.

See attached image. I want an option to change position on ticks, like in Kendo (see here).

I can't find an option in docs to move the axis position.

Currently, I get the desired result using SyncFusion Chart Component, attribute LabelPlacement allow selection between OnTicks and BetweenTicks option.

The Scatterline Chart is flipped upside down if the Height is under 100px.

To reproduce the problem, hover over the last value of the series. While the Tooltip enters, it causes horizontal and vertical scroll and flickers. Then, it is positioned correctly.

The issue is better observed if you increase the transition speed of the Tooltip wrapper.

Reproduction: https://blazorrepl.telerik.com/cREDloaV42j7Z19G13.

===

ADMIN EDIT

===

A possible workaround for the time being is to alter or stop the Tooltip animation with CSS. Here is a runnable sample demonstrating the approach: https://blazorrepl.telerik.com/QnEjvIOC04hXA6W709

In Kendo-React chart i can set the property "maxDivision" like this:

 <ChartCategoryAxis>
     <ChartCategoryAxisItem      
         maxDivisions={30}
         name="categoryAxisName"
         categories={categories}
...

and the chart will show only 30 dates in the displayed range, even if zoom in. 

Is there a way for doing the same thing in Blazor Chart? 

I tryed Type"fit" and MaxDateGroup but i need to show always all the points and this isnot a good solution.
I tryed ChartCategoryAxisLabels Step="number_of_labels_to_render" but when i zoom in the chart
will not show other dates.

Regards,

Davide

Enhance the Chart date axis label format, so that it's culture-aware in globalization scenarios, and there is no need to set ChartCategoryAxisLabels Format explicitly.

In the meantime, here are a few workarounds for the case when the ChartCategoryAxis BaseUnit is Days and the Chart shows MM/dd labels even to non-US users.

• The easier option is to use a standard format string:

<ChartCategoryAxis BaseUnit="ChartCategoryAxisBaseUnit.Days"
                    Type="ChartCategoryAxisType.Date">
    <ChartCategoryAxisLabels Format="d" />
</ChartCategoryAxis>

• The above contains the year, so another option is MonthDayPattern:

<ChartCategoryAxis BaseUnit="ChartCategoryAxisBaseUnit.Days"
                    Type="ChartCategoryAxisType.Date">
    <ChartCategoryAxisLabels Format="@( CultureInfo.CurrentUICulture.DateTimeFormat.MonthDayPattern )" />
</ChartCategoryAxis>

• To display a shorter numeric month, use the MonthDayPattern to detect the day-month order and then set  a custom format string.

Razor

<ChartCategoryAxis BaseUnit="ChartCategoryAxisBaseUnit.Days"
                    Type="ChartCategoryAxisType.Date">
    <ChartCategoryAxisLabels Format="@( GetShortDayMonthPattern() )" />
</ChartCategoryAxis>

C#

    private string GetShortDayMonthPattern()
    {
        var mdp = CultureInfo.CurrentUICulture.DateTimeFormat.MonthDayPattern;
        var separator = CultureInfo.CurrentUICulture.DateTimeFormat.DateSeparator;
        string pattern = mdp.IndexOf("M") < mdp.IndexOf("d") ? $"MM{separator}dd" : $"dd{separator}MM";

        return pattern;
    }

Regards, Author nickname Progress Telerik

Hello,

I want to connector to be directly connected with the chart. 

See https://dojo.telerik.com/AkEHuSiq/3 for reference.

Thank you.

I would like to synchronize several Charts, so when I move the mouse through one of them, the other two Charts show crosshairs at the same position as the first hovered Chart.

===

ADMIN EDIT

===

Prerequisite: Chart Crosshair

Hi,

We tried making the name property of our TelerikChartSeries dynamic by binding it to a string value. This however seems to completely crash startup, the browser tab freezes and the console doesn't show any errors. If we just put in a simple string in the Name property the application runs without a problem.

<TelerikChartSeries Type="ChartSeriesType.Column" Name="@Team1Name" Data="@Results" Field="@nameof(ChartViewModel.Team1Score)" CategoryField="@nameof(ChartViewModel.CategoryName)">
    <TelerikChartSeriesLabels Visible="true" />
</TelerikChartSeries>

As you can see in this example we're binding the Name property to Team1Name which can be changed whenever another team is selected from a dropdownlist.

Thank you in advance.