How can I swap the axes on an eCharts bar chart with javascript

Question

I have created an eCharts barchart and I just want to swap the x and y axes

I have tried just swapping the data objects for the axes but that doesn't work and googling hasn't turned up much at all.

This is the initialisation script for the bar chart

var chart = echarts.init(document.getElementById('chart'));
var option = {
    yAxis: {
        name: '',
        data: ''
    },

    xAxis: {
        name: '',
        data: ["CARH"  , "CDFR"  , "HGA"  , "O2RG"  , "SHLA"  , "SHWS"]
    },

    series: {
        name: '',
        type: 'bar',
        data: [100.29, 101.05, 100.78, 96.3, 101.8, 99.9]
    }
};
chart.setOption(option);

did you try this? var option = { yAxis: { name: '', data: ["CARH" , "CDFR" , "HGA" , "O2RG" , "SHLA" , "SHWS"] }, xAxis: { name: '', data: '' }, series: { name: '', type: 'bar', data: [100.29, 101.05, 100.78, 96.3, 101.8, 99.9] } }; — Abir.d, May 29 '19 at 11:57
No that doesn't change the orientation of the bars, I want them to display horizontally rather than vertically — Neil, May 29 '19 at 13:48

score 2 · Answer 1 · answered May 29 '19 at 16:12

It seems all the properties of option must be wrapped in arrays, and xAxis should be left empty:

option = {
    yAxis: [{
        name: '',
        data: ["CARH"  , "CDFR"  , "HGA"  , "O2RG"  , "SHLA"  , "SHWS"]
    }],

    xAxis: [{}],

    series: [{
        name: '',
        type: 'bar',
        data: [100.29, 101.05, 100.78, 96.3, 101.8, 50]
    }]
}

I found the solution by finding an example of an echart horizontal barchart, and removing options that did not alter the "horizontalness" of the chart. Then I compared this minimal set of options to the one given in the question.

score 0 · Answer 2 · answered May 30 '19 at 08:59

Try this:

var option = {
yAxis: [{
    name: '',
    data: ["CARH"  , "CDFR"  , "HGA"  , "O2RG"  , "SHLA"  , "SHWS"]
}],

xAxis: [{
    name: '',
    data: ['100.29', '101.05', '100.78', '96.3', '101.8', '50']
    }],

series: [{
    name: '',
    type: 'bar',
    data: [1  , 2  , 3  , 4 , 5  , 6]
}]

};

How can I swap the axes on an eCharts bar chart with javascript

2 Answers2