@page "/chart-axis"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Radzen Blazor Chart Axis
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The axes set the frame a chart is read against - the scale, the gridlines, the labels. By default they fit the data, but you can pin the range, format the values, and add a title.
</RadzenText>

<RadzenText Anchor="chart-axis#min-max-and-step" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Min, max and step
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    By default the Radzen Blazor Chart determines the Y axis minimum and maximum based on the range of values. For example it finds the minimum and maximum values and uses the closest "nice" number. A nice number is usually a multiple of a power of 10: 0, 10, 100, 1000, 200000 etc.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="ChartAxisMinMaxStep">
    <ChartAxisMinMaxStep />
</RadzenExample>

<RadzenText Anchor="chart-axis#format-axis-values" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Format axis values
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The value axis displays values with default formatting (<code>ToString()</code>). This can be customized in two ways - via the <code>FormatString</code> or the <code>Formatter</code> properties. <code>FormatString</code> supports the <RadzenLink Path="https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings" Text="standard .NET Number formats" />.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="ChartAxisFormatValues">
    <ChartAxisFormatValues />
</RadzenExample>

<RadzenText Anchor="chart-axis#display-grid-lines" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Display grid lines
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    You can make the chart display grid lines for either the value or category axis. Add a <code>RadzenGridLines</code> tag inside <code>RadzenValueAxis</code> or <code>RadzenCategoryAxis</code> and set its <code>Visible</code> property to <code>true</code>.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="ChartAxisGridLines">
    <ChartAxisGridLines />
</RadzenExample>

<RadzenText Anchor="chart-axis#set-axis-title" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Set axis title
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>RadzenAxisTitle</code> tag to display text below the category axis or next to the value axis.
</RadzenText>
<RadzenExample ComponentName="Chart" Example="ChartAxisTitle">
    <ChartAxisTitle />
</RadzenExample>