echarts

Set border in Apache eChart around chart


Is there a way to create a border around in Apache eChart? I've looked in the docs, tried various combinations, but can't seem to put a border around a chart.

I have them in a table and can add borders that way, but being able to add tehm to teh chart and not the table would be nice.


Solution

  • You can put a border around the grid in echarts. Using a second grid which contains the main grid you can create a border around the chart.

    Example:

    option = {
      grid: [
        {},
        {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          show: true,
          borderColor: 'red',
          borderWidth: 1
        }
      ],
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };
    

    You could also put a border on the div element used by echarts.