format a date in Chart in y-axis

[Francesco Pruneri]

Hi there , i have a stackingbar100 chart 

Non the Y-axis is a SQLServer field Date doing this code i have the format dd/mm/yyyy hh:mm:ss

The hour don't interest me. Is it possible to format it ? THX

SfChart>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartSeriesCollection>

        <ChartSeries DataSource="@TrainingRoundsDataSource" XName="Date" YName="TEagle" Name="TEagle" Type="ChartSeriesType.StackingBar100">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

        <ChartSeries DataSource="@TrainingRoundsDataSource" XName="Date" YName="TBirdie" Name="TBirdie" Type="ChartSeriesType.StackingBar100">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

        <ChartSeries DataSource="@TrainingRoundsDataSource" XName="Date" YName="TPar" Name="TPar" Type="ChartSeriesType.StackingBar100">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

        <ChartSeries DataSource="@TrainingRoundsDataSource" XName="Date" YName="TBogey" Name="TBogey" Type="ChartSeriesType.StackingBar100">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

        <ChartSeries DataSource="@TrainingRoundsDataSource" XName="Date" YName="TDBogey" Name="TDBogey" Type="ChartSeriesType.StackingBar100">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

        <ChartSeries DataSource="@TrainingRoundsDataSource" XName="Date" YName="TTBogey" Name="TBogey" Type="ChartSeriesType.StackingBar100">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

    </ChartSeriesCollection>

    <ChartLegendSettings Visible="true" EnableHighlight="true"></ChartLegendSettings>

    <ChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y} (${point.percentage}%)</b>"></ChartTooltipSettings>

</SfChart>

[Durga Gopalakrishnan]

Hi Francesco,

Greetings from Syncfusion.

By default, y axis supports only Double and Logarithmic valuetypes. We don’t have DateTime support for y axis. However, your requirement can be achieved by passing milliseconds for y value and converting the milliseconds to required datetime format in OnAxisLabelRender event. We have prepared sample based on your requirement. Please check with below snippet and screenshot.

<SfChart>

    <ChartEvents OnAxisLabelRender="AxisLabelEvent"></ChartEvents>

</SfChart>

@code {

public class StackedBarChartData

{

     public DateTime Apple { get; set; }

     public double appleSales { get { return (Apple- new DateTime(1970, 1, 1)).TotalMilliseconds; } }

     //…

}

 public List<StackedBarChartData> ChartPoints { get; set; } = new List<StackedBarChartData>

{

     new StackedBarChartData { Month = "Jan", Apple = new DateTime(2010, 01, 01), }

     //…

};

    public void AxisLabelEvent(Syncfusion.Blazor.Charts.AxisLabelRenderEventArgs args)

    {

        if (args.Axis.Name == "PrimaryYAxis")

        {

           args.Text = ((new DateTime(1970, 1, 1)).AddMilliseconds(args.Value)).ToString();

        }

    }

}

Sample : https://blazorplayground.syncfusion.com/VDBTZFWYqpagTUhO

Screenshot :

We also have a knowledge base on how to plot the datetime values in vertical axis. Please check with the below link.

KB : https://support.syncfusion.com/kb/article/13939/how-to-plot-date-time-values-in-vertical-axes-in-blazor-chart

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.