简体   繁体   中英

Highcharts X-Axis labels as Text

In this fiddle , with out changing the series data, Is it possible to show x-axis labels as text ie {"apple","orange","mango"} instead of decimals ie {0,1,2} with out separating labels from JSON and providing it to Categories.

$(function () {
    $('#container').highcharts({
        chart: {
        },
        xAxis: {

            labels: {
                enabled: true
            }
        },

        series: [{
            data: [["apple",29.9], ["orange",71.5], ["mango",106.4]]        
        }]
    });
});

Try this:

 $(function () {

var seriesData = [["apple",29.9], ["orange",71.5], ["mango",106.4]];     
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        tickInterval: 1,
        labels: {
            enabled: true,
            formatter: function() { return seriesData[this.value][0];},
        }
    },

    series: [{
        data: seriesData     
     }]
  });
});

SEE DEMO

You can use catgories in xAxis

xAxis: {
    categories: ["apple", "orange", "mango"],
}

I've updated your fiddle: http://jsfiddle.net/Lq6me/1/

If you don't want to use categories you can go for

labels: {
    formatter: function() {}
}

No need to do it manually the better solution is just pass type: 'category' in xAxis block. Look below snippet

xAxis: {
        type: 'category',
        labels: {
          rotation: -45,
          style: {
                  fontSize: '13px',
                  fontFamily: 'Verdana, sans-serif'
               },
          }
     }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM