ant-design-charts-blazor

A Blazor chart library, based on G2Plot

English | 简体中文

💿 Current Version

• Release:
• Development:

📦 Installation Guide

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

  $ dotnet add package AntDesign.Charts

  • Add namespace in _Imports.razor

  @using AntDesign.Charts

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

  <Line Data="data" Config="config" />
  
  @code {
      object[] data = new object[] {
          new  { year = "1991", value = 3 },
          new  { year = "1992", value = 4 },
          new  { year = "1993", value = 3.5 },
          new  { year = "1994", value = 5 },
          new  { year = "1995", value = 4.9 },
          new  { year = "1996", value = 6 },
          new  { year = "1997", value = 7 },
          new  { year = "1998", value = 9 },
          new  { year = "1999", value = 13 },
      };
  
      LineConfig config = new LineConfig()
          {
              Padding = "auto",
              XField = "year",
              YField = "value",
              Smooth = true,
          };
  }

🔧 Using JavaScript Functions in Configuration

When configuring charts, you can define JavaScript functions for properties like formatter or properties ending with Func. These functions will be properly converted from string representations to actual JavaScript functions.

Supported Function Syntax

The following JavaScript function syntaxes are supported:

1. Standard function declarations:

   config.Tooltip.Formatter = "function(datum) { return { name: datum.year, value: '$' + datum.value.toFixed(2) }; }";

2. Arrow functions:

   config.Tooltip.Formatter = "(datum) => { return { name: datum.year, value: '$' + datum.value.toFixed(2) }; }";

3. Concise arrow functions (implicit return):

   config.Tooltip.Formatter = "datum => '$' + datum.value.toFixed(2)";

4. Simple expressions:

   config.Meta.Value.Formatter = "'$' + datum * 100";

Using Functions with Array Properties

JavaScript functions can also be defined within objects inside arrays:

config.Annotations = new[]
{
    new
    {
        type = "text",
        position = new[] { "min", "median" },
        content = "Middle point",
        formatter = "function(item) { return item.value.toFixed(2); }"
    }
};

🔗 Links

• Official Blazor Documentation

🤝 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.

• (Chinese & English)
• (Chinese)

Scan QR Code with DingTalk