ChartJS add a second y-axis

Answered
0
1

Hi,

how can I add a second y-axis in chartJS at the position on the right?
I use one chart type as bar chart and the second with a different stepsize as Linechart.

In chartJS Doku: Multi Axis Line Chart

Thx

Stephan

  • You must to post comments
Best Answer
0
0

Here’s an example from the ChartJS documentation, in case you find it helpful: https://masteringjs.io/tutorials/chartjs/two-y-axes#:~:text=To%20add%20more%20axes%20to,chart%20has%20two%20Y%20axes (It’s written in JavaScript, not C#, but it can give you an idea of the relevant property names).

 

Here’s how to do it in Wisej.NET:

1.Create a new Wisej project and install the Wisej-3-ChartJS NuGet Package.

2. Add a new ChartJS in the designer. It will be named chartJS1 if you don’t change the default name.

3. Add this to the Page1_Load() function:

//Add a new dataset so we have some points on our example chart
object[] array1 = new object[] { 1, 3, 5, 7, 9 };
chartJS1.DataSets.Add("Data Set").Data = array1;

//Access the y axis and set the position to the right side of the graph
var firstyaxis = chartJS1.Options.Scales.yAxes[0];
firstyaxis.Position = HeaderPosition.Right;

//Create a second Y axis
var newYaxis = new OptionScalesAxesY();
//uncomment this if you want the newly created Y axis to be the one on the right
//newYaxis.Position = HeaderPosition.Right;

//Set the Y axes of the chart so that it has 2 axes.
chartJS1.Options.Scales.yAxes = new OptionScalesAxesY[] { firstyaxis, newYaxis };

I’ve also attached a sample.

-Julie

Attachment
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.