HxEChart #

Component for convenient rendering of Apache ECharts.

The HxEChart component is not intended to fully replicate the entire ECharts API. Instead, it provides a simple, user-friendly wrapper around the library. Use .NET anonymous objects to pass options to the chart. For a complete list of available options and their descriptions, refer to the ECharts documentation.

<HxEChart Options="_options" AutoResize="true" />

@code {
	private object _options;

	protected override void OnParametersSet()
	{
		// use anonymous object to pass options to the chart
		_options = new
		{
			Tooltip = new
			{
				Trigger = "item"
			},
			Legend = new
			{
				Top = "5%",
				Left = "center",
				TextStyle = new { Color = "#888" }
			},
			Series = new object[]
			{
				new
				{
					Name = "Access From",
					Type = "pie",
					Radius = new string[] { "40%", "70%" },
					AvoidLabelOverlap = false,
					ItemStyle = new
					{
						BorderRadius = 10,
						BorderColor = "#fff",
						BorderWidth = 2
					},
					Label = new
					{
						Show = false,
						Position = "center",
					},
					Emphasis = new
					{
						Label = new
						{
							Show = true,
							FontSize = 40,
							FontWeight = "bold"
						}
					},
					LabelLine = new
					{
						Show = false
					},
					Data = new object[]
					{
						new { Value = 1048, Name = "Search Engine" },
						new { Value = 735, Name = "Direct" },
						new { Value = 580, Name = "Email" },
						new { Value = 484, Name = "Union Ads" },
						new { Value = 300, Name = "Video Ads" }
					}
				}
			}
		};
	}
}

Initial setup #

The HxEChart component is not bound to any specific version or source of the library. For convenience, you can use our helper method to generate the <script> tag that references a supported version from the CDN.

Add the following line at the end of your App.razor file, just before the closing </body> tag:

@((MarkupString)HxEChartsSetup.RenderEChartsJavaScriptReference())

Sizing and styling #

The chart is rendered as a single div container sized by the Width (the default is 100%) and Height (the default is 400px) parameters. Set Height to an empty string (or @null) to omit the height declaration completely and let the surrounding CSS drive the height (e.g. a flex parent). Use AutoResize so the chart follows the CSS-driven size when the container changes:

<div style="display: flex; height: 60vh;">
	<HxEChart Options="_options" Height="" CssClass="flex-grow-1" AutoResize="true" />
</div>

Use CssClass to add CSS classes to the container. Any unmatched attributes (data-*, title, ...) are splatted onto the container as well, so there is usually no need for a wrapper element.

Handling clicks #

To handle clicks on the chart, use the OnClick event. The event handler receives an EChartClickEventArgs object as a parameter. The EChartClickEventArgs class contains properties such as SeriesIndex, DataIndex, Name, and Value. Click to blank area of the chart will return null values for these properties.

Passing JS function #

Use HxECharts.JSFunc class to pass a raw JavaScript function as a parameter:

More samples #

You can find more examples of how to use the HxEChart component, including some higher-level, pre-built components for individual chart types, in our Blocks section.

API #

Parameters #

Event callbacks #