CODEWITHSUNDEEP
javascriptjqueryhighcharts
Jostein
Jostein

Reputation: 21

Showing HighCharts series name on x-axis and in legend

I am trying to create a Column chart using Highcharts that show multiple series for one point in time only and I would like to show show the name of the series on the x-axis as well as being able to hide and show each series using the legend. The closest I have been able to get to what I'm trying to achieve is by adding the categories and having multiple series. 

xAxis: {
            categories: [
                'Tokyo',
                'New York',
                'London',
                'Berlin'
            ]
        }

and then adding multiple series with only one data point in each series

series: [{
            name: 'Tokyo',
            data: [49.9, null,null,null]

        }, {
            name: 'New York',
            data: [null, 83.6,null,null]

        }, {
            name: 'London',
            data: [null, null, 48.9,null]
        }, {
            name: 'Berlin',
            data:[null, null, null, 42.4]
        }]

The problem is that while this only shows one series for each point on the x-axis, Highcharts allocates space for each of the other series and when hiding a series only the series will be hidden not the label on the x-axis. link to jsfiddle is here: http://jsfiddle.net/md2zk/

Upvotes: 2

Views: 8492

Answers (2)

GOKUL K RAJU
GOKUL K RAJU

Reputation: 1

it's possible to hide Category along with the column.please go through the link given below . hope this will help.

http://jsfiddle.net/md2zk/633/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
           type: 'category',
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            },   
        },
        plotOptions: {

             series: {
              grouping: false,
              events: {
                legendItemClick: function () {
                debugger;
                    if (this.visible) {
                                        this.setData([], false)
                                         } 
                     else {
                                            this.setData([this.chart.series[this.index].userOptions], true);
                                            }
                }
            },
             borderWidth: 0,
            dataLabels: {
                enabled: true,
                //style: {
                //    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                //},

            },
          },
        },
        series: [{
            name: 'Tokyo',
            data: [{name : 'Tokyo',y:49.9}],
            y: 49.9

        }, {
            name: 'New York',
            data: [{name : 'New York',y:83.6}],
            y: 83.6

        }, {
            name: 'London',
            data: [{name : 'London',y:48.9}],
            y: 48.9
        }, {
            name: 'Berlin',
            data:[{name : 'Berlin',y: 42.4}],
            y: 42.4
        }],
          navigation: {
        buttonOptions: {
            enabled: true
        }
    }
    });
});

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

Set grouping: false in plotOptions, see: http://jsfiddle.net/Fusher/md2zk/5/

Upvotes: 5

Related Questions