Search code examples
javascriptapexcharts

How to prevent an ApexCharts chart label from being slanted

I am working on my project with Django where I need to use Javascript and a chart library. I have two charts that I made with ApexCharts, but I don't know how to prevent the label text to being slant and overflow. I can't find anything about this problem in the documentation or I'm not enough familiar to find what I need. :) enter image description here

var options07 = {
        series: [{
        name: 'SOHA',
        data: [ {{i.szervkult07a}} ]
        }, {
        name: 'RITKÁN',
        data: [ {{i.szervkult07b}} ]
        }, {
        name: 'IDŐNKÉNT',
        data: [ {{i.szervkult07c}} ]
        }, {
        name: 'GYAKRAN',
        data: [ {{i.szervkult07d}} ]
        }, {
        name: 'MINDIG',
        data: [ {{i.szervkult07e}} ]
        }],
        chart: {
        type: 'bar',
        height: 350,
        stacked: true,
        stackType: '100%'
        },
        responsive: [{
        breakpoint: 480,
        options: {
            legend: {
            position: 'bottom',
            offsetX: -10,
            offsetY: 0
            }
        }
        }],
        xaxis: {
        categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére' 
        ],
        },
        fill: {
        opacity: 1
        },
        legend: {
        position: 'right',
        offsetX: 0,
        offsetY: 50
        },
        };

        var chart = new ApexCharts(document.querySelector("#chart_szk07"), options07);
        chart.render();


var options07b = {
        series: [{
        name: 'SOHA',
        data: [{{i.szervkult07a}}]
        }, {
        name: 'RITKÁN',
        data: [{{i.szervkult07b}}]
        }, {
        name: 'IDŐNKÉNT',
        data: [{{i.szervkult07c}}]
        }, {
        name: 'GYAKRAN',
        data: [{{i.szervkult07d}}]
        }, {
        name: 'MINDIG',
        data: [{{i.szervkult07e}}]
        }],
        chart: {
        type: 'bar',
        height: 350
        },
        plotOptions: {
        bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
        },
        },
        dataLabels: {
        enabled: false
        },
        stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
        },
        xaxis: {
        categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
        },
        yaxis: {
        title: {
            text: 'fő'
        }
        },
        fill: {
        opacity: 1
        },
        tooltip: {
        y: {
            formatter: function (val) {
            return val + " fő"
            }
        }
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart_szk07b"), options07b);
        chart.render();
Solution

  • From the docs, You should be able to add rotate: 0 to the labels section of xaxis. I suggest trying to shorten those. I imagine a long label will not look as good as a shorter one.

    xaxis: {
  categories: ['A cég gondot fordít az ügyfelek igényeinek minél jobb megismerésére'],
  labels: {
    rotate: 0
  }
}