This is a migrated thread and some comments may be shown as answers.

Line Chart - Nothing but the data

1 Answer 217 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Rich
Top achievements
Rank 1
Rich asked on 15 Oct 2020, 03:25 PM
Hi All,
 
I'd like to make certain that I'm just showing one data line and no legends, tick marks, axes, padding and so on.  I would also like the first data point to be the center of the graph vertically.  

 

Here's my chart markup, please let me know if you have any suggestions.  Thank you so much.

 

 

<TelerikChart Width="100%" Height="100%" Transitions="false" RenderAs="Telerik.Blazor.RenderingMode.Canvas">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="" Data="@Data" Color="@LineColor">
            <ChartSeriesMarkers Visible="false" />
            <ChartSeriesLabels Visible="false" Background="transparent" />
        </ChartSeries>
    </ChartSeriesItems>
    <ChartCategoryAxes>
        <ChartCategoryAxis Visible="false"><ChartCategoryAxisMajorGridLines Visible="false" /></ChartCategoryAxis>
    </ChartCategoryAxes>
    <ChartValueAxes>
        <ChartValueAxis Visible="false"><ChartValueAxisMajorGridLines Visible="false" /></ChartValueAxis>
    </ChartValueAxes>
    <ChartTitle Visible="false" />
    <ChartLegend Visible="false" />
</TelerikChart>

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 16 Oct 2020, 12:58 PM

Hi Rich,

You seem to have hidden all the chart elements but the series, so that will yield a blank white space with just the line on it.

As for starting the line at the middle of the chart - you'd have to pad the data accordingly, a chart starts on the left always.

Here's a basic example that pads the data so the center point (number 4 of 7) is the first with meaningful data

<TelerikChart Width="100%" Height="100%" Transitions="false" RenderAs="Telerik.Blazor.RenderingMode.Canvas">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="" Data="@Data" Color="@LineColor">
            <ChartSeriesMarkers Visible="false" />
            <ChartSeriesLabels Visible="false" Background="transparent" />
        </ChartSeries>
    </ChartSeriesItems>
    <ChartCategoryAxes>
        <ChartCategoryAxis Visible="false"><ChartCategoryAxisMajorGridLines Visible="false" /></ChartCategoryAxis>
    </ChartCategoryAxes>
    <ChartValueAxes>
        <ChartValueAxis Visible="false"><ChartValueAxisMajorGridLines Visible="false" /></ChartValueAxis>
    </ChartValueAxes>
    <ChartTitle Visible="false" />
    <ChartLegend Visible="false" />
</TelerikChart>

@code{
    public List<object> Data = new List<object>() { null, null, null, 5, 8, 2, 7 };
    string LineColor = "cyan";
}

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Charts
Asked by
Rich
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or