Skip to content

chore: replace example with live example url #3154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 5, 2025
Merged

chore: replace example with live example url #3154

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 3 additions & 51 deletions components/chart/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,50 +24,8 @@ The <a href="https://demos.telerik.com/blazor-ui/chart/overview" target="_blank"

>caption Basic chart

````RAZOR
<TelerikChart>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@simpleData">
</ChartSeries>
<ChartSeries Type="ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@modelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
<ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>

<ChartValueAxes>
<ChartValueAxis Color="red"></ChartValueAxis>
</ChartValueAxes>

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

<ChartTitle Text="Quarterly sales trend"></ChartTitle>

<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Bottom">
</ChartLegend>
</TelerikChart>

@code {
public class MyDataModel
{
public int SecondSeriesValue { get; set; }
public string ExtraData { get; set; }
}

public List<MyDataModel> modelData = new List<MyDataModel>()
{
new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" },
new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" },
new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" },
new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" },
};

public List<object> simpleData = new List<object>() { 10, 2, 7, 5 };

public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}
````
<demo metaUrl="client/chart/overview/" height="500"></demo>

## Chart Elements

Expand Down Expand Up @@ -252,16 +210,10 @@ To execute Chart methods, obtain reference to the component instance via `@ref`.
| `Refresh` | Use the method to programmatically re-render the Chart. |
| `ResetDrilldownLevel` | Use the method to programmatically reset the drilldown level of the Chart. For more information refer to the [DrillDown article](slug:chart-drilldown#reset-drilldown-level). |

<div class="skip-repl"></div>

````RAZOR
<TelerikButton OnClick="@RefreshChart">Refresh Chart</TelerikButton>

<TelerikChart @ref="ChartRef" />
````RAZOR.skip-repl
<TelerikChart @ref="@ChartRef" />

@code {
public TelerikChart ChartRef;

private void RefreshChart()
{
ChartRef.Refresh();
Expand Down