Skip to main content

ChartJS3

ChartJS3 is the Chart.js chart control for Chart.js 3.5.0. It works like the ChartJS extension, which wraps Chart.js 2: you set a chart type, labels and data sets from server code, handle clicks on the server, and can get the rendered chart back as an image. The difference is the options. They follow the Chart.js 3 layout, with title, legend, tooltip and data labels grouped under Options.Plugins, and axis limits set on the axis itself.

The control ships with the chartjs-plugin-datalabels plugin and Moment.js 2.29.4 for time scales.

ChartJS, ChartJS3 or ChartJS4?

ChartJS (Chart.js 2.7.2), ChartJS3 (Chart.js 3.5.0) and ChartJS4 (Chart.js 4.5.0, package Wisej-4-ChartJS4) are separate controls, each with its own package and namespace. See Which ChartJS extension to use for how they compare.

Installation​

dotnet add package Wisej-4-ChartJS3

The package targets .NET Framework 4.8 and .NET 8 (including the -windows, Android, iOS and Mac Catalyst targets). After a rebuild, ChartJS3 appears in the Visual Studio toolbox. The scripts are embedded in the assembly.

Getting started​

using Wisej.Web.Ext.ChartJS3;

private void Page1_Load(object sender, EventArgs e)
{
    this.chartJS31.ChartType = ChartType.Line;
    this.chartJS31.Labels = new[] { "Mon", "Tue", "Wed", "Thu", "Fri" };

    var visits = (LineDataSet)this.chartJS31.DataSets.Add("Visits");
    visits.Data = new object[] { 320, 410, 380, 520, 470 };
    visits.BorderColor = Color.SteelBlue;
    visits.Fill = true;

    this.chartJS31.Options.Plugins.Title.Display = true;
    this.chartJS31.Options.Plugins.Title.Text = "Visits this week";
}

Everything the ChartJS page explains carries over: the nine chart types, how DataSets.Add creates a data set of the matching class, why the labels matter, live updates with UpdateData, GetImageAsync, and the ChartClick event. The sections below cover what's different.

Where the options moved​

SettingChartJS (Chart.js 2)ChartJS3 (Chart.js 3)
TitleOptions.TitleOptions.Plugins.Title
LegendOptions.LegendOptions.Plugins.Legend
TooltipsOptions.TooltipsOptions.Plugins.Tooltip (singular)
Data labelsOptions.DataLabelOptions.Plugins.DataLabels
Axis minimum and maximumaxis.Ticks.Min / Maxaxis.Min / Max, plus SuggestedMin / SuggestedMax
Axis titleaxis.ScaleLabelaxis.Title
Grid linesaxis.GridLinesaxis.Grid
Stepped lineLineDataSet.SteppedLineLineDataSet.Stepped
Base axisn/aOptions.IndexAxis ("x" or "y")
// Tooltips and legend now live under Plugins.
this.chartJS31.Options.Plugins.Tooltip.Enabled = false;
this.chartJS31.Options.Plugins.Legend.Display = false;

// Axis limits are set on the axis, not on its ticks.
this.chartJS31.Options.Scales.yAxes = new[]
{
    new OptionScalesAxesY { Min = 0, Max = 100 }
};
Suggested limits

Min and Max clip the data to a fixed range. SuggestedMin and SuggestedMax only widen the range computed from the data, so a value above the suggested maximum is still visible. Use the suggested limits when you want a sensible default range that never hides data.

Chart.js 3 additions​

  • Horizontal bars through IndexAxis. In Chart.js 3 a horizontal bar chart is a bar chart with indexAxis: 'y'. Set Options.IndexAxis = "y" on a Bar chart. The value isn't validated, so use exactly "x" or "y".
  • Stacked groups. LineDataSet.Stack puts data sets into named stack groups. With stacking on, each group becomes a separate stack.
  • Axis background. OptionScalesAxes.BackgroundColor paints the area behind a scale.
  • Hover colors on points. LineDataSet.PointHoverBackgroundColor and PointHoverBorderColor.
Porting from ChartJS

ChartJS and ChartJS3 have classes with the same names (ChartType, LineDataSet, OptionScalesAxesY and so on) in different namespaces. When you move a page from one to the other, change the using / Imports, and then move every option the table above lists. Code that still sets Options.Tooltips or Ticks.Min won't compile against ChartJS3.

API reference​