CODEWITHSUNDEEP
javascriptjquerycssecharts
Kiran
Kiran

Reputation: 8528

How to reduce the padding from the eCharts?

I am using echarts for visualizing some data in my web-application. I am using basic gauge chart for the visualization. If you notice the image below, there is too much padding in the chart. I would like to remove those padding and ideally have the chart occupy 100% of the space within the container?

Here is the javascript code:

// Setup chart gauge_basic_options = {

            // Add title
            //title: {
            //    text: 'Server resources usage',
            //    subtext: 'Random demo data',
            //    x: 'center'
            //},

            // Add tooltip
            tooltip: {
                formatter: "{a} <br/>{b}: {c}%"
            },

            // Add series
            series: [
                {
                    name: 'Total Invoices',
                    type: 'gauge',
                    center: ['50%', '55%'],
                    detail: {formatter:'{value}%'},
                    data: [
                        {value: 50, name: 'Total Invoices'}
                    ]
                }
            ]
        };

Any idea how to do it?

enter image description here

Upvotes: 10

Views: 11363

Answers (4)

cmo
cmo

Reputation: 192

You can specify the spacing of the grid from each edge with a value, in pixels, or percentage:

var option = {
  grid: {
    left: '10%',
    right: '10%',
    top: 0,
    bottom: 0
  }
}

However, I would warn against using 0 for top or bottom when you have hidden the x-axis. Part of the chart line can get clipped and will look a different thickness if it runs along the base of the axis.

Upvotes: 8

Aadam
Aadam

Reputation: 1541

I was struggling with the bar chart for the same issue. Added below in options. This solved it.

grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0
    }

Upvotes: 1

MrAJ
MrAJ

Reputation: 95

The padding is automatically adjusting based on the size of the div.

Eg: Below div will use the whole page and renders the gauge with plenty of whitespaces

<div id="main" style="width: 100vw;height:100vh;"></div>

And below one would be a compact one

<div id="main" style="width: 100vw;height:100vh;"></div>

Check this fiddle - http://jsfiddle.net/athishayd/x5Lc3mr6/1/

I would like to remove those padding and ideally have the chart occupy 100% of the space - This would hamper the gauge's aesthetics.

Upvotes: 0

Sergey Fedorov
Sergey Fedorov

Reputation: 4420

In the gauge you also can control the padding with chart radius. By default radius is 75% and for fill space completely you need to set new value, example:

option = {
  series: [{
  name: 'Total Invoices',
  type: 'gauge',
  radius: '100%', // this
  center: ['50%', '50%'],
  detail: {formatter:'{value}%'},
  data: [ {value: 50, name: 'Total Invoices'} ]
}]
  };

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width:300px; height:300px;"></div>

Upvotes: 11

Related Questions