[Solved] Adding chartseries adds margin left and right of plotarea

[Maximilian]

Hi,

When I add a chart series of a different type to a telerik chart then there is a margin left and right of the plot area added. So between the y-axis and where the plot starts there is whitespace (the same on the right side, where the x-axis expands beyond the plot area).

 

Dependencies:

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0"/>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" PrivateAssets="all"/>
<PackageReference Include="Telerik.FontIcons" Version="2.1.0" />
<PackageReference Include="Telerik.UI.for.Blazor" Version="5.0.1" />

 

Example:

@page "/AreaChartDemo"
@using Telerik.Blazor
@using Telerik.Blazor.Components

<TelerikChart>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Area" Name="Chile" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="India" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="Haiti" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="foo" Data="@Data" Field="@nameof(ModelData.Idx1)" Margin="0" AutoFit="true" Padding="0"></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 Idx1 { get; } = 0.0;
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };

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


    public List<ModelData> Data = new List<ModelData>()
{
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 1.988,
            Series3 = -0.253
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 2.733,
            Series3 = 0.362
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 3.994,
            Series3 = -3.519
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 3.464,
            Series3 = 1.799
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 4.001,
            Series3 = 2.252
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 3.939,
            Series3 = 3.343
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 1.333,
            Series3 = 0.843
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = -2.245,
            Series3 = 2.877
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.339,
            Series3 = -5.416
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 2.727,
            Series3 = 5.59
        }
    };

}

Thanks

[Maximilian]

I noticed that the linechart values are plotted not at the major ticks of the x axis but at the minor ticks of the x axis. Hence the first data point starts not on the y-axis (where x=0) but at x=ticksize. How can I remove the minor ticks?

 

[Maximilian]

A few learnings:

- you cannot mix ScatterLine with Area chart, former uses a numerical axis, latter a categorical one

- when I want to add horizontal lines to an Area chart, I shouldn't use Line charts but instead use ChartValueAxisPlotBand

This is the full fixed example

@using Telerik.Blazor
@using Telerik.Blazor.Components

<TelerikChart>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Area" Name="Chile" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="India" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="Haiti" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
    </ChartSeriesItems>

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

    <ChartValueAxes>
        <ChartValueAxis AxisCrossingValue="@AxisCrossingValue">
            <ChartValueAxisLabels Format="{0}%"></ChartValueAxisLabels>
            <ChartValueAxisPlotBands>
                @* horizontal line at y = 1.0 *@
                <ChartValueAxisPlotBand From="0.97" To="1.03" Color="blue" Opacity="1" />
                @* another at y = 5.0 *@
                <ChartValueAxisPlotBand From="4.97" To="5.03" Color="red" Opacity="1" />
            </ChartValueAxisPlotBands>
        </ChartValueAxis>
    </ChartValueAxes>

</TelerikChart>

@code {
    public class ModelData
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };

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


    public List<ModelData> Data = new List<ModelData>()
{
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 1.988,
            Series3 = -0.253
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 2.733,
            Series3 = 0.362
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 3.994,
            Series3 = -3.519
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 3.464,
            Series3 = 1.799
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 4.001,
            Series3 = 2.252
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 3.939,
            Series3 = 3.343
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 1.333,
            Series3 = 0.843
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = -2.245,
            Series3 = 2.877
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.339,
            Series3 = -5.416
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 2.727,
            Series3 = 5.59
        }
    };

}

[Dimo]

Hello Maximilian,

By default, the Chart Area series are justified, while the Line series (and most others) are not. I added a Justified parameter to the ChartCategoryAxis component and it will be available in our next release 14.1.0. or the one that comes after it. You will have to set the new parameter to true to achieve the desired look.

The Chart does not render minor ticks by default, so please locate the code, which enables them and remove it:

    <ChartCategoryAxes>
        <ChartCategoryAxis>
            <ChartCategoryAxisMinorTicks Visible="true" ...  />
        </ChartCategoryAxis>
    </ChartCategoryAxes>

Your findings are true and are documented here:

• Mixing Series
• Plot Bands

On a side note, please ask the license holder at your company to assign you a Telerik license (I see that they have a few spare ones). This will ensure that your account is compliant with our license agreement and you can benefit from technical support.

Regards,
Dimo
Progress Telerik

[Maximilian]

@Dimo it's really great that you expose the Justified parameter! thanks