Adding a jqx-chart-value-axis to each jqx-chart-serie-group doesn't work as expected. The final value axis is applied to the jqx-chart level instead of the jqx-chart-serie-group level and others are missing.
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@model HomeIndexViewModel
@{
ViewData["Title"] = "Index";
Padding padding = new Padding { Left = 5, Top = 5, Right = 35, Bottom = 5 };
Padding titlePadding = new Padding { Left = 90, Top = 0, Right = 0, Bottom = 10 };
Rectangle legendPosition = new Rectangle { Left = 520, Top = 140, Width = 100, Height = 100 };
FormatSettings formatSettings = new FormatSettings { Sufix = "%", DecimalPlaces = 2 };
Title weightTitle = new Title { Text = "Weight (lbs)" };
Title bodyFatTitle = new Title { Text = "Body Fat Percent (%)" };
Title muscleMassTitle = new Title { Text = "Muscle Mass Percent (%)" };
}
<div class="example-description">Graph</div><br />
<jqx-chart style="width: 100%; height: 500px;" padding="padding" title-padding="titlePadding" title="Body Composition" description="Weight, Muscle Mass, and Body Fat Tracking" show-legend="true" legend-position="legendPosition" source="Model.Entries">
<jqx-chart-x-axis datafield="EntryDateTime" type="AxisType.Date" base-unit="BaseUnit.Day"></jqx-chart-x-axis>
<jqx-chart-series-groups>
<jqx-chart-serie-group type="SerieType.Spline">
<jqx-chart-value-axis title="weightTitle"></jqx-chart-value-axis>
<jqx-chart-series>
<jqx-chart-serie datafield="Weight" display-text="Weight"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
<jqx-chart-serie-group type="SerieType.Spline">
<jqx-chart-value-axis title="bodyFatTitle" position="right" visible="true"></jqx-chart-value-axis>
<jqx-chart-series>
<jqx-chart-serie datafield="BodyFatPercent" display-text="BF%" format-settings="formatSettings"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
<jqx-chart-serie-group type="SerieType.Spline">
<jqx-chart-value-axis title="muscleMassTitle" position="right" visible="true"></jqx-chart-value-axis>
<jqx-chart-series>
<jqx-chart-serie datafield="MuscleMassPercent" display-text="MM%" format-settings="formatSettings"></jqx-chart-serie>
</jqx-chart-series>
</jqx-chart-serie-group>
</jqx-chart-series-groups>
</jqx-chart>
@section Scripts {
<script src="~/lib/jqwidgets/jqxchart.js"></script>
}
Adding a jqx-chart-value-axis to each jqx-chart-serie-group doesn't work as expected. The final value axis is applied to the jqx-chart level instead of the jqx-chart-serie-group level and others are missing.
The above code produces this chart.