ant-design-blazor / ant-design-charts-blazor

A Blazor chart library, based on G2Plot

Ant Design Blazor

A rich set of enterprise-class UI components based on Ant Design and Blazor.

English | 简体中文

✨ Features

• 🌈 Enterprise-class UI designed for web applications.
• 📦 A set of high-quality Blazor components out of the box.
• 💕 Supports WebAssembly-based client-side and SignalR-based server-side UI event interaction.
• 🎨 Supports Progressive Web Applications (PWA).
• 🛡 Build with C#, a multi-paradigm static language for an efficient development experience.
• 🌍 Internationalization support for dozens of languages.
• 🎁 Seamless integration with existing ASP.NET Core MVC and Razor Pages projects.

🌈 Online Examples

WebAssembly static hosting on:

• Document site
• Enterprise system dashboard

🖥 Environment Support

• Supports .NET Core 3.1 / .NET 5 / .NET 6 / .Net 7 / .NET 8.
• Supports WebAssembly static file deployment.
• Supports 4 major browsers engines, and Internet Explorer 11+ (Blazor Server only)
• Supports .NET MAUI / WPF / Windows Forms and other Blazor Hybrid workloads.
• Supports Electron and other Web standards-based environments.

Due to WebAssembly restriction, Blazor WebAssembly doesn't support IE browser, but Blazor Server supports IE 11† with additional polyfills. See official documentation.

From .NET 5, IE 11 is no longer officially supported. See Blazor: Updated browser support. Unofficial support is provided by Blazor.Polyfill community project.

💿 Current Version

• Release:

• Nightly:

  Download our latest nightly builds

🎨 Design Specification

Regularly synchronize with Official Ant Design specifications, you can check the sync logs online.

Therefore, you can use the custom theme styles of Ant Design directly.

Before the 1.0 release, we will only sync antd 4.x styles.

📦 Installation Guide

Prerequirement

• Install .NET Core SDK 3.1.300 or later, .NET 8 is even better.

Option 1: Create a new project from the dotnet new template

We have provided the dotnet new template to create a Boilerplate project out of the box：

• Install the template

  $ dotnet new --install AntDesign.Templates

• Create the Boilerplate project with the template

  $ dotnet new antdesign -o MyAntDesignApp

Options for the template：

Options	Description	Type	Default
-f | --full	If specified, generates all pages of Ant Design Pro	bool	false
-ho | --host	Specify the hosting model	'wasm' | 'server' | 'hosted'	'wasm'
--styles	Whether use NodeJS and Less to compile your custom themes.	css | less	css
--no-restore	If specified, skips the automatic restore of the project on create	bool	false

Option 2: Import Ant Design Blazor into an existing project

• Go to the project folder of the application and install the Nuget package reference

  $ dotnet add package AntDesign

• Register the services in Program.cs

  builder.Services.AddAntDesign();

  or Startup.cs

  services.AddAntDesign();

• Add namespace in _Imports.razor

  @using AntDesign

• To display the pop-up component dynamically, you need to add the <AntContainer /> component in App.razor.

  • For Blazor WebApp, you also need to specify render mode to <Routes /> for interactivity.

  <Routes @rendermode="RenderMode.InteractiveAuto" />            <-- specify the rendermode ✨
  + <AntContainer @rendermode="RenderMode.InteractiveAuto" />    <-- add this component ✨

  • For legacy blazor apps just add a line of code:

  <Router AppAssembly="@typeof(MainLayout).Assembly">
      <Found Context="routeData">
          <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
      </Found>
      <NotFound>
          <LayoutView Layout="@typeof(MainLayout)">
              <Result Status="404" />
          </LayoutView>
      </NotFound>
  </Router>
  
  +  <AntContainer />   <-- add this component ✨

• Finally, it can be referenced in the .razor component!

  <Button Type="@ButtonType.Primary">Hello World!</Button>

🔨 Development

Gitpod

Click the button below to start a new workspace for development for free.

Local

• Install .NET Core SDK 8.0.100 or later.

• Install Node.js (only for building style files and interoperable TypeScript files)

• Clone to local development

  $ git clone https://github.com/ant-design-blazor/ant-design-blazor.git
  $ cd ant-design-blazor
  $ npm install
  $ dotnet build ./site/AntDesign.Docs.Build/AntDesign.Docs.Build.csproj
  $ npm start

• Visit https://localhost:5001 in your supported browser and check local development documentation for details.

  Visual Studio 2022 is recommended for development.

🔗 Links

• Ant Design Blazor Documentation
• Official Blazor Documentation
• MS Learn for Blazor Tutorial

🗺 Roadmap

Check out this issue to learn about our development plans for the 1.0 release.

You can also find the latest news about the features we will implement in the future with antd5.0 style.

🤝 Contributing

If you would like to contribute, feel free to create a Pull Request, or give us Bug Report.

💕 Donation

This project is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more backers. We will use the proceeds for community operations and promotion. You can support us in any of the following ways:

• OpenCollective
• Wechat
• Alipay

We will put the detailed donation records on the backer list.

❓ Community Support

If you encounter any problems in the process, feel free to ask for help via following channels. We also encourage experienced users to help newcomers.

• 

• 

  Scan QR Code with DingTalk

  

Contributors

This project exists thanks to all the people who contribute.

Code of Conduct

This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community. For more information see the .NET Foundation Code of Conduct.

☀️ License

.NET Foundation

This project is supported by the .NET Foundation.

ant-design-charts-blazor's Issues

Is it possible use combo chart?

There's an example on the website, but can not use that me.

https://antblazor.com/en-US/charts/combo

GroupedColumnLine
StackedColumnLine
DualLine
ColumnLine

Added Data Zoom

g2 existed feature
https://g2-v3.antv.vision/zh/docs/api/interaction#zoom-%E7%BC%A9%E6%94%BE

折线图应该如何让X轴与Y轴显示名称

试了很多配置都没成功

IsStack property

Hi,

In the line config on g2plot, there is a possibility to stack points with same data ( isStack :true).
But I don't see this possibility here, is there a way to do that or is this not currently implemented?

How to change totalLabel property in Donut chart?

Could someone provide me a snippet on how to change this property?

[JsonPropertyName("totalLabel")] public string TotalLabel { get; set; }

Now it is chinese and in an english based application...

Tooltip 配置项中TitleField不起作用，json的配置项应为title

Tooltip 配置项中TitleField不起作用，json的配置项应为title，但目前是titleField

TypeError: Cannot read properties of undefined (reading 'length')

v0.2.0版本不能适应最新v2版本的g2plot

按示例引用v1.1.28版本的g2plot没有问题，最新的v2.3.13还不支持

AntDesign.Charts BulletViewConfigData 数据类型应该为double类型

    [JsonPropertyName("ranges")]
    public int[] Ranges { get; set; }

update .net6 version please

Click event on Element Interval or Point Label

Hi,

Is it possible to add click event on Element Interval or point label? i needed like drill to details action.

Thanks.

图表宽度缩小时，图例不正常显示

1.怎么设置图例才能让图例文字显示完整？同时又不要和左侧环形图叠加起来。
2.是否可以考虑加配置，可设置为图例优先显示，然后环形图根据图例宽度（高度）和总宽度（总高度）自动调整？谢谢！

Version 0.2.2 introduces breaking changes

With Version 0.2.2 the StackedColumnConfig is no longer found. As well as the StackedColumn in general seems to be gone. From the history and change tracker it seems that the idea is to use just the Column and the ColumnConfig. But so far I haven't found what the idea is to recreate the connected area again?

Also in case of release management I was pretty suprised to find such a change in a patch version update. I would suggest for future updates to go with semantic versioning. In that case that would have meant to increase the major version.

Create chart-config at runtime does not work!

Hi Ant-Community,

Background:
I use the same page for the display of charts, but pass a parameter that processes the data per department. To make it visible on the report which department it is, the title of the chart has to be set dynamically after loading the page.
However, I cannot do this the way it is indicated in Ant examples, but I have to define the config at a later time (preferably in a method) and compose titles dynamically there.

1 .
So, to set chart titles dynamically, I define first the config:

Definition

.
.
.
2 .
Then I create config at runtime in a function:

Title is then displayed, but its content remains unchanged (so chart is not updated when a date range changes)!

If I define configutration statically again (like in your examples), everything works fine.

The problem here is that I can only define titles once and it always stays the same for the whole time!

Is this an error in the chart component or is there another way to set the title dynamically?

Thanks

performance not good

I use line chart to show 8*3600 dots, and use the slider to change the x-axial window.
It takes almost 19 seconds to show the chart.
how to improve it?

图表配置Statistic属性时图表不显示

不加时正常显示，加了使整个图表都不显示。我需要用这个属性来设置环形图中心文字

How to change data

如何动态改变数据 There are no examples
请求接口之后 怎么重新渲染，找了半天也不知道怎么做

Donut Chart - Statistic Broken

Describe the bug

The DonutConfig Statistic variable is broken due to OneOf.

Steps to reproduce (please include code)

Go to https://antblazor.com/en-US/charts/pie
Scroll down to Donut
Click Example 2 or 3

Exceptions (if any)

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot return as T1 as result is T0
System.InvalidOperationException: Cannot return as T1 as result is T0
at OneOf.OneOf2[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[AntDesign.Charts.DonutStatisticContent, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].get_AsT1() at System.Text.Json.JsonPropertyInfo1[[AntDesign.Charts.DonutStatisticContent, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].GetMemberAndWriteJson(Object obj, WriteStack& state, Utf8JsonWriter writer)
at System.Text.Json.Serialization.Converters.ObjectDefaultConverter1[[OneOf.OneOf2[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[AntDesign.Charts.DonutStatisticContent, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], OneOf, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].OnTryWrite(Utf8JsonWriter writer, OneOf2 value, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.Serialization.JsonConverter1[[OneOf.OneOf2[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[AntDesign.Charts.DonutStatisticContent, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], OneOf, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].TryWrite(Utf8JsonWriter writer, OneOf2& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.JsonPropertyInfo1[[OneOf.OneOf2[[System.String, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[AntDesign.Charts.DonutStatisticContent, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], OneOf, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].GetMemberAndWriteJson(Object obj, WriteStack& state, Utf8JsonWriter writer)
at System.Text.Json.Serialization.Converters.ObjectDefaultConverter1[[AntDesign.Charts.DonutViewConfigStatistic, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].OnTryWrite(Utf8JsonWriter writer, DonutViewConfigStatistic value, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.Serialization.JsonConverter1[[AntDesign.Charts.DonutViewConfigStatistic, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].TryWrite(Utf8JsonWriter writer, DonutViewConfigStatistic& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.JsonPropertyInfo1[[AntDesign.Charts.DonutViewConfigStatistic, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].GetMemberAndWriteJson(Object obj, WriteStack& state, Utf8JsonWriter writer) at System.Text.Json.Serialization.Converters.ObjectDefaultConverter1[[AntDesign.Charts.DonutConfig, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].OnTryWrite(Utf8JsonWriter writer, DonutConfig value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter1[[AntDesign.Charts.DonutConfig, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].TryWrite(Utf8JsonWriter writer, DonutConfig& value, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.Serialization.JsonConverter1[[AntDesign.Charts.DonutConfig, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].TryWrite(Utf8JsonWriter writer, Object& value, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.Serialization.Converters.ArrayConverter2[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnWriteResume(Utf8JsonWriter writer, Object[] value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter2[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnTryWrite(Utf8JsonWriter writer, Object[] value, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.Serialization.JsonConverter1[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].TryWrite(Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter1[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].WriteCore(Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.JsonSerializer.WriteCore[Object[]](JsonConverter jsonConverter, Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state) at System.Text.Json.JsonSerializer.WriteCore[Object[]](Utf8JsonWriter writer, Object[]& value, Type inputType, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.Serialize[Object[]](Object[]& value, Type inputType, JsonSerializerOptions options) at System.Text.Json.JsonSerializer.Serialize[Object[]](Object[] value, JsonSerializerOptions options) at Microsoft.JSInterop.JSRuntime.InvokeAsync[Object](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args) at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__151[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at AntDesign.Charts.ChartComponentBase2.<Create>d__46[[System.Collections.Generic.IEnumerable1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[AntDesign.Charts.DonutConfig, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at AntDesign.Charts.ChartComponentBase2.<OnAfterRenderAsync>d__43[[System.Collections.Generic.IEnumerable1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[AntDesign.Charts.DonutConfig, AntDesign.Charts, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()

Further technical details

• AntDesign Nuget Package version: 0.7 nightly
• Include the output of dotnet --info
• The IDE (VS / VS Code/ VS4Mac) you're running on, and it's version

I can't make the bubble chart to display the bubbles

First of all thank you for the librairy it's so great.

I can't make the bubble chart work. Honestly someone should update the bubble chart exemple because i just cant find the pattern to make it work and im probably not alone i pass nearly 3 hour. I tried so many values in parameters i'm just totally lost. I succesfully make nearly all the charts to work except this one. There is just nothing that appear on the chart.

                Earnings.Add(new
                {
                    YField = earning.EpsEstimated,
                    XField = i,
                    size = 9269612,
                    type = "Estimated"
                });

                Earnings.Add(new
                {
                    YField = earning.Eps,
                    XField = i,
                    size = 9269612,
                    type = "Actual"
                });
    private readonly BubbleConfig config1 = new BubbleConfig
    {
        YField = "YField",
        XField = "XField",
        SizeField = "size",
        ColorField = new[] { "type" },
        Color = new[] { "blue", "red" },
        XAxis = new ValueTimeAxis
        {
            Visible = true,
            Min = -5,
            Max = 5,
        },
        YAxis = new ValueTimeAxis
        {
            Visible = true,
            Min = -5,
            Max = 5
        }
    };

大佬 希望增加.net 5的支持

嘻嘻

DataFields cannot be changed

I tried to add a StackedColumn chart in my project. For starters I just added a config + data from the demo page which worked as expected. Although as soon as I tried to add my own object and adjust the XField, YField and StackField values the chart stopped working.
I made some tests with the example data and it seems that internally it always looks for year, value and type regardless of the config. In the console I get this error:

ant-design-charts-blazor.js:17 TypeError: Cannot read property 'toString' of undefined
    at g2plot.js:29
    at Module.d (g2plot.js:1)
    at e.processData (g2plot.js:29)
    at e.init (g2plot.js:29)
    at e.init (g2plot.js:29)
    at e.render (g2plot.js:29)
    at e.render (g2plot.js:29)
    at g2plot.js:29
    at Module.d (g2plot.js:1)
    at e.eachLayer (g2plot.js:29)

EDIT: Personally I would vote for keeping the source code including the comments in english. That would make it easier for people like me that don't speak chinese to navigate through the source code and be able to contribute PR's :)

Can it be used to plot candle stick?

As titled, if yes, how？thanks a lot in advance.

bug-UpdateConfig not work for Height

when page resize, update the bar height according to the actual window size, the updateConfig function will not work as expected.
example below shows update config when click button
`
<Bar @ref="chart1" Data="data1" Config="config1" />

IChartComponent chart1;

int height = 200;

public void UpdateConfig()
{
    Console.WriteLine(heigh);
    var newConfig = new BarConfig
    {
        Title = new AntDesign.Charts.Title
        {
            Visible = true,
            Text = "基础条形图"
        },
        ForceFit = true,
        XField = "销售额",
        YField = "地区",
        Label = new BarViewConfigLabel
        {
            Visible = true,
            Position = "right"
        },
        XAxis = new ValueAxis
        {
            Visible = false
        },
        YAxis = new CatAxis
        {
            Visible = true,
            OffsetX = 35,
            OffsetY = -20
        },
        BarSize = 15,
        Height = height 
    };
    height += 200;
    chart1.UpdateConfig(newConfig, true);
}

`

Change Chart Width

Hi All,

I have tried to change the width of the chart via Config => Width. But that does not work!

Currently, a chart takes the whole line, which looks ugly when there are only a few values. I want to define the width of the chart myself, so that a table can be placed next to the chart (similar to what is done in MS Excel).

How do I change the width of the chart programmatically?

Thanks

GeneralConfigration 图表通用配置 有问题

设置active 状态的示例，反复点击不同状态按钮的时候出现了错误和图标图层异常。文档操作就可以重现。

Pie chart not show when load data from api

Hi, like this issue, but this case is Pie chart, and can't use ChangeData method to load data. Pie chart only run when initialize data manual

This is code when load data from api

<Pie @ref="pie1" Data="data2" Config="pieconfig"></Pie>

IChartComponent pie1;
object[] data_pie = new object[10];

protected override async Task OnInitializedAsync()
{
          var dataApi = await client.GetFromJsonAsync<DataObject>("api/data");
          if (dataApi.Data!= null && dataApi.Data.Count > 0)
          {
                 data_pie = new object[dataApi.Data.Count];
                 for (var i = 0; i < dataApi.Data.Count; i++)
                 {
                      tmp = dataApi.Data[i];
                      data_pie [i] = new { value = tmp.A, type = tmp.B};
                 }
                 pie1.ChangeData(data_pie , true);
          }
}

readonly PieConfig pieconfig = new PieConfig
        {
            ForceFit = true,
            Title = new AntDesign.Charts.Title
            {
                Visible = true,
                Text = "Multicolor Pie Chart"
            },
            Description = new Description
            {
                Visible = true,
                Text = "Specify the color mapping field (colorField), and the pie slice will be displayed in different colors according to the field data. To specify the color, you need to configure the color as an array. \nWhen the pie chart label type is set to inner, the label will be displayed inside the slice. Set the offset value of the offset control label."
            },
            Radius = 0.8,
            AngleField = "value",
            ColorField = "type",
            Label = new PieLabelConfig
            {
                Visible = true,
                Type = "inner"
            }
        };

Can you put g2plot.min.js in the nuget package

In this way, users can directly use <script src="_content/AntDesign.Charts/g2plot.min.js"></script> to reference

Introduce-Installation Guide-Code Error

The code change:

Title= new Title()
{

        Text = "曲线折线图",
        Visible =true,
    },
    Description = new Description()
    {
        Visible = true,
        Text = "用平滑的曲线代替折线。",
    },
    Padding = "auto",
    ForceFit = true,
    XField = "year",
    YField = "value",
    Smooth = true,

Is the data zoom implemented

this is a great set of components;
这是一套非常棒的组件，我在产品中用到了散点图和曲线图，但是数据量太多，请问有没有类似echarts的datazoom功能，可以进行局部内容的缩放，我看了demo，但没有找到，如果您已经实现类似功能的话，请问需要怎么设置。
非常感谢。thanks

现在的BlazorChart不匹配最新的2.x的g2plot，请问作者还会更新嘛

现在的BlazorChart不匹配最新的2.x的g2plot，请问作者还会更新嘛

Localize "Total" Label in Donut Chart

I have a donut chart defined with:

<Donut @ref="WorkHistorySpreadingChart" Data="SpreadingStatisticItems" Config="ConfigSpreading" TItem="StatisticItem" />

protected DonutConfig ConfigSpreading { get; private set; } = new DonutConfig
        {
            ForceFit = true,
            Color = new[] { "#314A9B", "#9D4FA0", "#E45E8D", "#FF8671", "#FFBD5E", "#F9F871", "#6154A2", "#F1F1E6" },
            Theme = "dark",
            Radius = 0.8,
            Padding = "auto",
            AngleField = "effort",
            ColorField = "customer"
        };

Here I want to localize the "Total" label. I saw in the source code that I can set:

Statistic = new DonutViewConfigStatistic { Visible = true },
and in the OnInitializedAsync Method:

ConfigSpreading.Statistic.TotalLabel = Localizer["TotalLabel"];

How is this option intended to use?

But as soon as I set the Statistic Property the chart is no longer rendered.

AntDesign.Charts.Column with no click Event?

I need use the click event on the AntDesign.Charts.Column chart, but there is no this event?

we need a new chart: Stacked Column Charts

Calendar chart is missing but documented

In the current version of the chart documentation for Blazor, there is a calendar chart component shown. I was unable to find any files in the source tree related to the calendar chart component. Is it possible to use this component? https://antblazor.com/en-US/charts/calendarchart

Thanks in advance.

---

Translated to chinese using translator:

在当前版本的Blazor的图表文档中，有一个日历图表组件。我无法在源码树中找到日历图表组件的任何文件。是否可以使用这个组件？https://antblazor.com/en-US/charts/calendarchart
提前感谢。

尝试增加event，例如tooltip:show，为什么从不被执行

        if (OnLegendClick.HasDelegate)
            await JS.InvokeVoidAsync(InteropSetEvent, Ref.Id, "legend-item:click", chartRef, nameof(JsLegendClick));

        if (OnElementClick.HasDelegate)
            await JS.InvokeVoidAsync(InteropSetEvent, Ref.Id, "element:click", chartRef, nameof(JsOnElementClick));

        if (OnTooltipChanged.HasDelegate)
            await JS.InvokeVoidAsync(InteropSetEvent, Ref.Id, "tooltip:show", chartRef, nameof(JsOnTooltipChanged));

---

    [Parameter]
    public EventCallback<ChartEvent> OnLegendClick { get; set; }
    [JSInvokable]
    public async Task JsLegendClick(System.Text.Json.JsonElement ev) { if (OnLegendClick.HasDelegate) await OnLegendClick.InvokeAsync(new ChartEvent(this, ev)); }

    [Parameter]
    public EventCallback<ChartEvent> OnElementClick { get; set; }
    [JSInvokable]
    public async Task JsOnElementClick(System.Text.Json.JsonElement ev) { if (OnElementClick.HasDelegate) await OnElementClick.InvokeAsync(new ChartEvent(this, ev)); }

    [Parameter]
    public EventCallback<ChartEvent> OnTooltipChanged { get; set; }
    [JSInvokable]
    public async Task JsOnTooltipChanged(System.Text.Json.JsonElement ev) { if (OnTooltipChanged.HasDelegate) await OnTooltipChanged.InvokeAsync(new ChartEvent(this, ev)); }

Title和Description不显示问题

G2引用1.1.28正常显示Title和Description，引用最新的2.3.40不显示Title和Description。

GuideLine should be replaced by Annotations

In v2 of G2Plot setting GuideLine does nothing, the config has moved to annotations

E.g. https://g2plot.antv.vision/en/docs/api/plots/column#-line-annotation

Is data zoom implemented

this is a great set of components;
这是一套非常棒的组件，我在产品中用到了散点图和曲线图，但是数据量太多，请问有没有类似echarts的datazoom功能，可以进行局部内容的缩放，我看了demo，但没有找到，如果您已经实现类似功能的话，请问需要怎么设置。
非常感谢。thanks

G2Plot is not defined

Line only draw a X axis when property/field name of data object is capitalize

Hi,

Follows samples in
https://antblazor.com/en-US/charts/line#components-line-demo-multiple-line

If I create the config as below
private LineConfig countingChartConfig = new LineConfig
{
....................
XField = "Date",
YField = "Value",
SeriesField = "Name",
...........................................
};
and my data object is:
{
public string Date;
public string Value;
public string Name;
}
When the program runs, it only draws a X axis

It works well when lowercase the first letter of filed names.

The label Type "spider" for pie charts does not respect the dark theme

based on the demo for the pie chart, when I change the label to:

    Label = new PieLabelConfig()
    {
        Visible = true,
        Type = "spider",
    }

When set to Type = "outer" it is rendered correctly:

Data from Service not shown

I have the following config:

    protected StackedColumnConfig ConfigStacked { get; private set; } = new StackedColumnConfig
            {
                ForceFit = true,
                Padding = "auto",
                XField = "year",
                YField = "value",
                StackField = "type",
                Color = new[] { "#ae331b", "#f27957", "#dadada", "#609db7", "#1a6179" },
                YAxis = new ValueAxis
                {
                    Min = 0
                },
                Label = new ColumnViewConfigLabel
                {
                    Visible = false,
                },
                LocalRefresh = true
            };

with this model:

    public class StatisticDto
    {
        public string year { get; set; }
        public double value { get; set; }
        public string type { get; set; }
    }

I know try to load data from my webservice and parse them into a list of StatisticDto's to display them in the chart:

    protected override async Task OnInitializedAsync()
    {
        try
        {
            IsLoading = true;

            List<MonthlyWorkHistoryDto> workHistoryDtos = await StatisticsApi.GetMonthlyWorkHistoryDtosAsync();
            StatisticItems = workHistoryDtos.Select(d => new StatisticDto
            {
                year = $"{d.Year}",
                type = d.CustomerName,
                value = d.MonthlyHours
            }).ToList();

            StateHasChanged();
        }
        catch (Exception ex)
        {
            Log.Error("Failed to load work history", ex);
        }
        finally
        {
            IsLoading = false;
        }
    }

With that there is just no chart shown.

I now tried to add a manualy entry:

            StatisticItems = new List<StatisticDto>
            {
              new StatisticDto { year =  "2020", type =  "Foo", value =  10 },
            };

That works as expected. It doesn't matter if I add the manual entry before or after the service call in the end it shows only the manual entry.
When I debug I see that there are 41 items in the list, but none shown. I also tried to add the exact same entry in the select that worked in the manual example, but despite having 41 entries of that on in my list the chart just won't appear.
Any ideas what I'm doing wrong?

MILESTONE July 2020

MILESTONE July 2020

Charts

• Line - 折线图
• StepLine - 阶梯折图
• Area - 面积图
• StackedArea - 堆叠面积图
• Column - 柱状图
• StackedColumn - 堆叠柱状图
• GroupedColumn - 分组柱状图
• RangeColumn - 区间柱状图
• Histogram - 直方图
• Waterfall - 瀑布图
• Bar - 基础条形图
• StackedBar - 堆叠条形图
• GroupedBar - 分组条形图
• RangeBar - 区间条形图
• Pie - 饼图
• Donut - 环图
• Rose - 玫瑰图
• StackedRose - 堆叠玫瑰图
• GroupedRose - 分组玫瑰图
• Radar - 雷达图
• Scatter - 散点图
• Bubble - 气泡图
• Heatmap - 热力图
• DensityHeatmap - 密度热力图
• Treemap - 矩形树图
• Calendar - 日历图
• Bullet - 子弹图
• Gauge - 仪表盘
• Liquid - 水波图
• WordCloud - 词云

Mini Charts

• Progress - 进度条
• RingProgress - 环形进度条
• TinyArea - 迷你面积图
• TinyColumn - 迷你柱形图
• TinyLine - 迷你折线图

Combo Charts

• DualLine - 双折线混合图表
• ColumnLine - 柱线混合图表
• GroupedColumnLine - 分组柱+折线线混合图表
• StackedColumnLine - 堆叠柱+折线线混合图表

General Configration

• Title and Description - 标题与描述
• Dark Mode - 暗黑主题
• Axis - 坐标轴
• Legend - 图例
• Label - 图形标签
• Set Padding - 设置图表内边距
• Set_State - 设置图表状态量
• Guideline - 辅助线
• Tooltip - -提示信息

Event

• OnTitleClick

Basis

• GraphicStyle - 绘图属性
• Support formatter
• Support OneOf
• Demos
• Docs Site

XAxis type in LineConfig is fixed as ValueCatTimeAxis

Is your feature request related to a problem? Please describe.

if want to set line data like [(1,1),(2,2)...] what type should we use? it's not the datetime type

Describe the solution you'd like

we should use dynamic type as XAxis setting.

Additional context

for Shinese：
在line配置中XAxis固定为 ValueCatTimeAxis，是不是把x轴的类型固定为时间类型了，
如果像展示x的是[1,2,3,4...10]这种类型，如何使用呢？

Unable to update data for a combo chart

Hi,

Using the sample https://antblazor.com/en-US/charts/combo#components-combo-demo-column-line-combo, I'm trying to update the data but not sure what the syntax is. I've tried using await chart1.ChangeData(new [] { uvData, transformData }, true); with and without the boolean and it ends up with an empty chart.

What do I pass to ChangeData on a combo chart?

Thanks

用@ref无法捕获StackedArea组件的引用

我按照堆积面积图的示例代码编写了以下内容：

@using AntDesign.Charts
@using Title = AntDesign.Charts.Title
@using BlazorApp.Data
@inject MyService Service;

<StackedArea @ref="chart1" TItem="object" Config="config" />

@code{
    IChartComponent chart1;
    IChartComponent chart2;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var records = await Service.GetRecordsAsync();
        List<object> chartData = new List<object>();
        foreach (var item in records)
        {
            chartData.Add(new { date = item.RecordTime.ToString("yyyy/MM/dd"), type = "a", value = item.a});
            chartData.Add(new { date = item.RecordTime.ToString("yyyy/MM/dd"), type = "b", value = item.b});
            chartData.Add(new { date = item.RecordTime.ToString("yyyy/MM/dd"), type = "c", value = item.c> 0 ? item.c: 0 });
        }
        await chart1.ChangeData(chartData.ToArray());
    }

    readonly StackedAreaConfig config = new StackedAreaConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "余额"
        },
        Description = new Description
        {
            Visible = false,
            Text = "当label类型设置为line时，label与面积区域尾端顶部对齐。"
        },
        XField = "date",
        YField = "value",
        StackField = "type",
        Color = new[] { "#6897a7", "#8bc0d6", "#60d7a7", "#dedede", "#fedca9", "#fab36f", "#d96d6f" },
        XAxis = new ValueCatTimeAxis
        {
            Type = "dateTime",
            TickCount = 5
        },
        Label = new StackedAreaLabel
        {
            Visible = true,
            Type = "line",
        },
        Legend = new Legend
        {
            Visible = false,
        }
    };
}

但是执行到await chart1.ChangeData(chartData.ToArray());这行的时候会报错

System.NullReferenceException:“Object reference not set to an instance of an object.”

<>4__this.chart1 是 null。

不知道问题出在哪里

Missing file in unpkg for g2plot, incompatible g2plot version

There is a problem after recent releases in https://unpkg.com/@antv/g2plot@latest/dist/.
The file "g2plot.js" is no longer available there and the file "g2plot.min.js" is not working.

It is also causing problems on yours documentation website - https://ant-design-blazor.github.io/en-US/charts/bullet.

Tooltip in Charts is conflicting with Tooltip in AntDesign.Components

When AntDesignChartsBlazor and AntDesignBlazor are used together (which is quite likely) and both of them have their namespaces added in _Imports.razor, then there is a naming conflict, because both projects have Tooltip component.
The Tooltip in Charts is an information page (which at this stage is just empty).

I have a fix ready - just need to confirm the new name. For example TooltipInfo?

I found that there is ITooltip.cs that actually also contains Tooltip class that is used all over charts. For my dev purposes I changed that to ChartTooltip. Or maybe a different namespace would be a better choice?

Will blazor version support more charts?

I saw the react antdesign version have plenty of charts like flow charts, map charts, liquid charts. etc. So will all these be done into blazor version? Or is there a guide on how to make a contribute to convert these charts? thanks!

GroupedColumnLineConfig is undefined

The AntDesign.Charts version is 0.2.2, refer to the official example, but find this 'GroupedColumnLineConfig' type.
The error is shown in the following image: