6

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

4 Answers 4

8

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/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width:300px; height:300px;"></div>

5

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.

0

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.

1
  • Your width should be 100vw Jun 11, 2021 at 13:33
0

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
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.