Increase width of Xaxis title in bar chart in highcharts

Question

I am trying bar chart using Highcharts. In the below code we have xaxis categories like : ['Name1', 'Name2', 'Name3', 'Name4' ].

Firstly, I am using the below highcharts code in react native to develop iOS app.

I am trying to place the Name on each individual bar's in the graph(bar chart), which is working but when the name text from the categories array is v.large then the width of the title is not getting increased & the text is coming in multiple lines with the minimum width. If the name is v.large then only we are getting dotted text on the graph.

Can we increase the width of the title? and If so how can we increase the width within the iPhone's width.

chart: {
                type: 'bar',
                reflow: true,
                marginRight: 30,
            },
            credits: {
                enabled: false
            },
            title: {
                align: "left",
                text: "A comparison of the business’ digital health with that of the competitors.",
                backgroundColor:'green',
                style: {
                    color: '#808080',
                    fontWeight: '400',
                    fontSize: '13px',
                }
            },
             xAxis: {
             categories: ['Name1', 'Name2', 'Name3', 'Name4' ],
             title: {
                    align: "left",
                },
                scrollbar: {
                    enabled: false
                },
                labels: {
                    x: 25,
                    y: -22,
                    align: 'left',
                    useHTML: true,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Open Sans',
                        color: '#464646',
                        backgroundColor: 'green',
                    },
                },
             },
             yAxis: {
             gridLineColor: "transparent",
             stackLabels: {
                    qTotals: [91,99,85,99],
                    enabled: true,
                    useHTML: true,
                    style: {
                        fontWeight: "bold",
                    },
                    formatter: function () {
                        return this.options.qTotals[this.x];
                    },
                },
                tickInterval: 20,
                labels: {
                    enabled: false
                },
                plotOptions: {
                series: {
                    dataLabels: {
                        align: 'center',
                        enabled: false,
                        crop: false,
                        overflow: 'none',
                        verticalAlign: 'top',
                        y: -50,
                        style: {
                            fontWeight: '300',
                            color: '#808080',
                            fontSize: '30px',
                        }
                    },
                    pointWidth: 25,
                    borderWidth: 0,
                    pointPadding: 10,
                    stacking: "normal",
                    states: {
                        hover: {
                            enabled: false
                        }
                    },
                    //cursor: 'pointer',
                    point: {
                        events: {
                            click: function (event) {
                            }
                        }
                    }
                }
            },
            series: [
                {
                    name: "",
                    data: [3, 1, 15, 1],
                    color: "#f5f6f8",
                    dataLabels: {
                        enabled: false
                    },
                },
                {
                    name: "",
                    color: "#ff0000",
                    data: [{ y: 97, color: "#0f875a" }, { y: 99, color: "#0f875a" }, { y: 85, color: "#0f875a" }, { y: 99, color: "#0f875a" }]
                }
            ],
             }

For a sample I have taken a graph i.e bar chart from Highcharts, In the link jsfiddle.net/psre6Lj9/1 we have some fruits names, where 'Apples' width is not sufficient and the text is being displayed in multiple lines. I want to increase the width of the title. How can i do that.

Hi iOSDev, Could you describe more precisely what you want to achieve? Do you want to increase the width of the chart main title or axis title? — ppotaczek, Feb 05 '19 at 14:55
Hi @ppotaczek : I am trying to increase the width of xaxis title. — iOSDev, Feb 06 '19 at 01:55
@ppotaczek: I have taken a sample from Highcharts to show, https://jsfiddle.net/psre6Lj9/1/ . In this, I have the title "Apples " which is coming in multiple lines. my requirement is to increase the width of the title. — iOSDev, Feb 06 '19 at 02:30

score 1 · Accepted Answer · answered Feb 06 '19 at 10:28

1

To increase the width of the labels, set the right style:

xAxis: {
    categories: ['Apples Apples Apples Apples Apples Apples Apples ', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    labels: {
        x: 25,
        y: -22,
        align: 'left',
        style: {
            width: '300px'
        }
    }
}

Live demo: https://jsfiddle.net/BlackLabel/went9xmf/

API: https://api.highcharts.com/highcharts/xAxis.labels.style

answered Feb 06 '19 at 10:28

ppotaczek

36,341
2
14
24

Thank you so much @ppotaczek, I have tried with 'minwidth' but it did not work, and width parameter option is not available in the documentation – iOSDev Feb 06 '19 at 10:33

Increase width of Xaxis title in bar chart in highcharts

1 Answers1