How can I add more padding to tree chart in echartjs?

Question

For some tools, we use tree chart from echartjs .

Everything works fine but I have one problem and it is the size of padding in tree chart.

As you can see in this image everything is fine, but I can't enable more padding to this chart : i want this chart for my friend website (امروز چندمه)

And this is my code :

myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });

    myChart.setOption(option = {

        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },

        series:[
            {
                type: 'tree',

                data: [data],

                top: '1%',
                left: '15%',
                bottom: '1%',
                right: '7%',

                symbolSize: 7,

                orient: 'RL',

                label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                },

                leaves: {
                    label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right'
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
});

Thanks :)

Answer 1

You need to change the values of the top and bottom properties to negative values, and the left and right properties to larger positive values.

For example, set top : -10% and bottom: -15%. Then Right: 20% and left:15%. You will have to try different values until you find a combination that suits your situation.The higher the right and left values, and the lower the top and bottom values, the more pronounced the effect. That is, making your chart taller and narrower, thus spacing or padding out the values.

You could also reduce the value of the symbolSize property e.g to 1.

Here is the link to the JsFiddle

Answer 2

Echart version 4 removed the padding option from the nodes. I also tried to fix this but there is an issue on echart github. You can use other features like mouseOver.