.NET Highcharts not applying responsive rules - highcharts

Question

My responsive rules are not being applied in Highcharts .NET.
Can anyone point me to the right direction?
I want the step=2 to be applied when max width of 460.
I can put step=2 on the x axis in the highcharts object but that results in the chart always having 2 step. I only want this when the responsive condition is applied.
This is my controller code:
public ActionResult FundInformation()
{
var fondsViewModel = new FondsViewModel();
List<Series> tmpList = new List<Series>();
List<string> colorList = new List<string>();
//var data = fonds.GrafiekData;
List<double> fondsdata = new List<double> { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 54.4, 54.4, 54.4, 54.4, 54.4 };
List<ColumnSeriesData> fondslist = new List<ColumnSeriesData>();
fondsdata.ForEach(p => fondslist.Add(new ColumnSeriesData { Y = p }));
ColumnSeries Cs = new ColumnSeries
{
Name = "Fonds",
Data = fondslist,
Stack = "ul",
};
tmpList.Add(Cs);
colorList.Add("#CCCCCC");
var chartId = $"chart{Guid.NewGuid().ToString("N")}";
Highcharts myChart = new Highcharts()
{
Colors = colorList,
Chart = new Chart
{
ClassName = "grafiek",
//StyledMode = true,
Height = 135,
Type = ChartType.Column,
Events = new ChartEvents
{
//Redraw = "function(e) {console.log(this)}"
}
},
Title = new Title
{
Text = "Fonds"
},
Credits = new Credits
{
Enabled = false
},
Legend = new Legend
{
Enabled = false
},
XAxis = new List<XAxis>
{
new XAxis
{
GridLineWidth= 0,
Min = 1,
Max = Cs.Data.Count(),
TickAmount = Cs.Data.Count(),
Reversed = true,
StartOnTick = true,
Labels = new XAxisLabels
{
Enabled= true,
//Step=2
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
TickAmount = 3,
GridLineWidth = 0.5,
MinorGridLineWidth = 0,
AllowDecimals = false,
Title = new YAxisTitle
{
Enabled = false
},
Labels = new YAxisLabels
{
Enabled = true,
Format = "{value}%",
},
StackLabels = new YAxisStackLabels
{
Enabled = false
}
}
},
Tooltip = new Tooltip
{
Enabled = false,
Shared = true,
Shadow = new Shadow
{
Enabled = false
}
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
Stacking = PlotOptionsColumnStacking.Normal,
PointStart = 1,
PointPadding = 0,
GroupPadding = 0.03,
BorderWidth = 0,
},
Series = new PlotOptionsSeries
{
EnableMouseTracking = false,
States = new PlotOptionsSeriesStates
{
Hover = new PlotOptionsSeriesStatesHover
{
Enabled = false
},
},
DataLabels = new PlotOptionsSeriesDataLabels
{
Enabled = false,
Y = -35,
Rotation = 0,
Align = PlotOptionsSeriesDataLabelsAlign.Center,
Inside = true,
}
}
},
Responsive = new Responsive
{
Rules = new List<ResponsiveRules>
{
new ResponsiveRules
{
Condition = new ResponsiveRulesCondition
{
MaxWidth=460,
},
ChartOptions = new
{
XAxis = new List<XAxis>
{
new XAxis
{
Labels = new XAxisLabels
{
Step = 2,
}
}
},
}
},
}
},
Series = tmpList,
};
myChart.ID = chartId;
fondsViewModel.FondsId = chartId;
fondsViewModel.Chart = myChart;
fondsViewModel.FondsNaam = "Some name fonds";
fondsViewModel.LabelFondsBeschrijvingKnop = "Omschrijving";
fondsViewModel.FondsBeschrijvingContent = "Something something";
fondsViewModel.FondsBeschrijvingUrl = "Something.com";
return View(fondsViewModel);
}
And this is my view code:
#model WebApplication3.Controllers.FondsViewModel
#using Highsoft.Web.Mvc.Charts.Rendering
#{
var renderer = new HighchartsRenderer(Model.Chart, "somekey");
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="pensioen-bij-row verdeling">
<div class="fondsdetail">
<div id="#Model.FondsId" class="grafiek"></div>
#Html.Raw(renderer.RenderHtml(false))
<button class="fondsbeschrijving">#Model.LabelFondsBeschrijvingKnop</button>
<div class="beschrijving">
#Html.Raw(Model.FondsBeschrijvingContent)
<a class="externe-link" href="#Model.FondsBeschrijvingUrl" target="_blank"><span>#Model.FondsNaam</span></a>
</div>
</div>
</div>
Im using Highsoft.Highcharts 8.0.

Answer 1

Try to use this code:
ChartOptions = new { xAxis = new {
labels = new { step = 2 }
} }
If this wouldn't help could you share a JS code produced by wrapper?