CODEWITHSUNDEEP
highcharts
Shashank Bhatt
Shashank Bhatt

Reputation: 857

Highcharts series label legend in one line

I need to show highcharts api series name in one line but not able to get it correctly.enter image description here

When viewport width is larger then it's not an issue but on narrow width the third legend item drops to new line. Due to SVG rendering, I am not able to apply CSS into group element.

In any case active users just wraps to second line and I am not able to set width of parent group element. So far I have tried all legend default options but it didn't work.

So any help would be great.

https://jsfiddle.net/h28jv3zL/

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
     legend: {
        align: "left",
        x: 0,
        y: 0,
        itemWidth: 100,
        // symbolWidth: 0,
        // symbolHeight: 0,
        // symbolRadius: 0,
        verticalAlign: "top",
        layout: "horizontal",
        floating: false,
        backgroundColor: "white",
        shadow: false,
        itemStyle: {
          "fontWeight": "normal",
          "color": "#101010",
          "textOverflow": "normal",
          "width": "auto",
          "white-space": "nowrap",
          'padding-right': "10px" 
        }
      },

    plotOptions: {
        series: {
            fillOpacity: 0.1
        }
    },

    series: [{
          name: "Inactive Users",
          data: [10,11,12],
          color: "#D8D8D8",
          //showInLegend: false
        },    
        {
          name: "New Users",
          data: [10,11,12],
          color: "#696969",
          //showInLegend: false
        },
        {
          name: "Active Users",
          data: [10,11,12],
          color: "#202020",
          //showInLegend: false
        },]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Upvotes: 0

Views: 767

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You can add some logic to check the chart.plotWidth and base on that substract series name or hide it inside the labelFormatter callback.

Demo: https://jsfiddle.net/BlackLabel/souphrg9/

Upvotes: 1

Related Questions