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 :)

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 :)

• javascript
• charts
• visualization

• can you check the css element corresponding to it and override the css properties to have padding – Shadab Ahmed Commented Feb 28, 2019 at 15:02

3 Answers 3

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 bination 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

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.

Seems like in Echart version 4 there is no way to define padding for nodes But there is a way to avoid collapsing of nodes.

This tree is gonna take as much space (width and height) as you allow it to take. So you can just specify bigger height value for outer div. And then overflow: auto; for next div.

<div style="overflow:auto">
 <div style="min-height:2000px">
  <EchartsSVG/>
 </div>
</div>

You can create a formula to count your nodes and calculate min-height