Question 289079 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why my responsive chart option settings doesn't work?

I am trying to make my charts responsive, using echarts.js. I found here that I can use the property media and query.

The problem is that I do not see any change when I change the width.

let myChart = echarts.init(document.getElementById('barchart'));
 
        let option = {
            baseOption: { // baseOption
                tooltip: {
                    formatter: 'Hashtag {b} <br /> Tweets: {c}'
                },
                toolbox: {
                    feature: {
                        dataView: {},
                        restore: {},
                        saveAsImage: {},                           
                    },
                    left: '1%',
                    top:'top',
                    right:'auto',
                    bottom:'auto'
                },
                grid: {
                    left: '2%',
                    top: '17%',
                    right: 'auto',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true,
                        interval: 0
                      },
                      axisLabel: {
                        interval: 0,
                        rotate: 45,
                        width: 78,
                        overflow: 'truncate'
                      },
                      axisPointer: {
                        show: true,
                        type: 'shadow'
                      },
                    data: hashtags
                
                    
                },
                yAxis: { 
                    type: 'value'
                },
                series: [
                    {
                        name: 'Tweet count',
                        type: 'bar',
                        data: countOfEachHashTag,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        label: {
                            show: true,
                            position: 'top'
                        },
                        itemStyle: {
                            color: 'rgb(8,72,103)'
                        }
                    }
                ]
            },
            media: [
                {
                    query: {
                        maxWidth: 576
                    },
                    option: {
                        grid: {
                            left: 'auto',
                            top: 'auto',
                            right: 'auto',
                            bottom: 'auto',
                            width: '406',
                            height: '600',
                            containLabel: true
                        }
                    }
                }
            ]
        };
    myChart.setOption(option);

My code seems correct, as per the example, but I do not see any change in the container’s width and height when I resize my window and the container size descreases too.

My html code for this chart is this:

<div id="barChartCollapse" class="collapse show">
     <div id="barchart" style="width: auto;height:600px;">

     </div>
</div>

Is something missing?

minWidth, as per the example, works, but maxWidth doesn’t. The example link that I provided specifically points that width, height, aspectRatio (height / width), each of which can add min or max as prefix. That’s very strange.

Tags:

3

Answers


  1. 0

    I think the heigh of you div is fixed by the height:600px, so chart cannot adapt

     <div id="barchart" style="width: auto;height:600px;">

 </div>
    Login or Signup to reply.
  2. 0

    Seems to work as intended. Here is a small example:

    option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: [150, 230, 224, 218, 135, 147, 260],
    }
  ],
  media: [
    {
      query: {
        maxWidth: 650
      },
      option: {
        grid: {
          height: '50%',
          width: '50%',
          right: 0,
          bottom: 0,
          containLabel: true
        }
      }
    }
  ]
};

    If you now change the window size to smaller than 650 pixel, the chart will shrink to 50% size and jump to the lower right corner.

    What exactly do you want to achieve?

    On a side note, I dont think that left: 'auto' works as its not documented for grid.

    Login or Signup to reply.
  3. 0

    To have a responsive chart :

    • Set the chart’s container size. In Echarts, the size of the container has to be set before the chart is initialized. (You already have that)
    <div id="barChartCollapse" class="collapse show">
   <div id="barchart" style="width:auto; height:600px;"> //or width: 100%;

   </div>
</div>

    var myChart = echarts.init(document.getElementById('barChartCollapse'));
window.addEventListener('resize', function() {
  myChart.resize();
});

    This way, your chart will always fit your window’s width as you resize it.

    Also check this complete documentation on the subject.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search