Change the orientation of text on categoryAxis of jqchart

Question

I have a jqxchart where in everything is appearing perfectly. The only issue remains is of the text on the categoryAxis of the chart. the text is coming in the horizontal direction and its overlapping with the other text of the chart. Can any1 please help me changing the orientation of the text that shows on categoryAxis? Here's the code that I am using

function BindServerErrorChart() {
    // prepare chart data
    var sampleData = [
                { Server: 'Server1', Error: 6 },
                { Server: 'Server2', Error: 50 },
                { Server: 'Server3', Error: 31 },
                { Server: 'Server4', Error: 78 },
                { Server: 'Server5', Error: 19 },
                { Server: 'Server6', Error: 60.90 }
                ];


    // prepare jqxChart settings
    var settings = {
        title: "Errors By server",
        description: "",
        showLegend: true,
        enableAnimations: false,
        padding: { left: 20, top: 5, right: 20, bottom: 5 },
        titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
        source: sampleData,
        categoryAxis:
                    {
                        dataField: 'Server',
                        showGridLines: false,
                        flip: false
                    },
        colorScheme: 'scheme01',
        seriesGroups:
                    [
                        {
                            type: 'column',
                            orientation: 'horizontal',
                            columnsGapPercent: 100,
                            toolTipFormatSettings: { thousandsSeparator: ',' },
                            valueAxis:
                            {
                                flip: true,
                                unitInterval: 10,
                                displayValueAxis: true,
                                description: '',
                                formatFunction: function (value) {
                                    return parseInt(value);
                                }
                            },
                            series: [
                                    { dataField: 'Error', displayText: 'Servers' }
                                ]
                        }
                    ]
    };
    // setup the chart
                    $('#ServerErrorChart').jqxChart(settings);
}

score 4 · Accepted Answer · answered Oct 18 '12 at 10:26

4

set textRotationAngle: 90 in the categoryAxis settings

answered Oct 18 '12 at 10:26

score 1 · Answer 2 · answered Oct 16 '12 at 10:53

1

I just got the solution to this. I edited as following.

categoryAxis:
{
dataField: 'Server',
showGridLines: false,
flip: true,
textRotationAngle: 90
},

answered Oct 16 '12 at 10:53

Gautam

1,728
8
32
67

Change the orientation of text on categoryAxis of jqchart

2 Answers2