CODEWITHSUNDEEP
javascripthighchartsdotnethighcharts
AustinT
AustinT

Reputation: 2026

Highcharts : I am changing x-axis label, why are the label's not showing up?

I am changing the label of my x-axis values. After trying to accomplish this, none of x-axis label's display.

Javascript Code

$(document).ready(function() {
var labels = [ '5/7','5/7','5/7','5/7','5/7','5/7','5/7','5/7','5/7','5/7' ];
chart = new Highcharts.Chart({
    chart: { renderTo:'chart_container' }, 
    title: { text: 'Rev Load' }, 
    xAxis: { categories: ['5/7 64298-R3', '5/7 64308-R3', '5/7 64311-R3', '5/7 64312-R3', '5/7 64302-R3', '5/7 64307-R3', '5/7 64309-R3', '5/7 64297-R3', '5/7 64310-R3', '5/7 64305-R3'], labels: { 
             formatter: function() { return labels[this.value];}  }, 
             tickInterval: 3 }, 
    yAxis: { max: 0.0018, min: 0.0014, plotLines: [{ color: 'red', dashStyle: 'shortDash', value: 0.0018, width: 2 }, { color: 'red', dashStyle: 'shortDash', value: 0.0014, width: 2 }], title: { text: '' } }, 
    series: [{ data: [0.00150, 0.00170, 0.00140, 0.00180, 0.00150, 0.00160, 0.00140, 0.00150, 0.00180, 0.00160], name: 'Values' }]
});

C# DotNet Code

chart.SetXAxis(new XAxis
        {
            Categories = categories.ToArray(),
            TickInterval = 3,
            Labels = new XAxisLabels { Formatter = "function() { labels[this.value];} " }

        });

Screenshot of what currently displays enter image description here

As the screenshot shows the x-axis labels for the points are missing.

P.S. I am not referring to the x-axis title but the x-axis labels.

Background Information

Please let me know if there are any misunderstandings in the problem. Thank you for your help and assistance!

EDIT - I fixed the problem with missing the return keyword, but it looks like its still not showing the labels

Upvotes: 1

Views: 2026

Answers (1)

mike
mike

Reputation: 7177

You're not returning a value from you label formatter function -- try

formatter: function() { return labels[this.value];}  }

Another problem is that this.value inside the formatter function is something like '5/7 64298-R3', so labels[this.value] is undefined.

It looks like you're trying to display the first part of the value -- if so, try:

formatter: function() { return this.value.split(" ")[0]; }

Upvotes: 2

Related Questions