JSFiddle - React, Tailwind, and code Playground

Echarts_MinMaxDisplay

by tmtron

HTML

<script src="//cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="msgs"></div>'

JavaScript

/**
 * stack only works for category axis!
 * see: https://github.com/apache/incubator-echarts/issues/7937#issuecomment-375918207
 */ 


var myChart = echarts.init(document.getElementById('main'));
var msgs= document.getElementById('msgs');

var filterMode = 
//'filter'
//'weakFilter';
'empty'
//'none'
;

option = {
  toolbox: {
  	feature: {
      dataZoom: {
      	show: true,
        yAxisIndex: 'none'
      },
      dataView: {
      	show: false
      },
      saveAsImage: {
      	show: false
      },
      restore: {
      	show: false
      },
      magicType: {
      	show: false
      },
      brush: {
      	show: false,
        type: ['lineX', 'clear']
      }    
    }
  },
  brush: {
    xAxisIndex: 'all',
    brushLink: 'all',
    brushType: 'lineX',
    brushMode: 'single',
    removeOnClick: true,
    outOfBrush: {
      colorAlpha: 0.1
    },
    brushStyle: {
    color: 'rgba(94,94,124,0.3)',
    borderColor: 'red'
    }
  },  
  legend: {
    data: ['issue']
  },
  grid: {
  	top: 30,
    bottom: 80
  },
  dataZoom: [{
      type: 'slider',
      show: false,
      filterMode: filterMode
    },
    {
      type: 'inside',
      show: false,
      filterMode: filterMode
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      snap: false
    },      
  },
  xAxis: {
    type: 'time',
    // then we get a click event for the axis-lavels
    triggerEvent: true
  },
  yAxis: {
    type: 'value', 
    // ,    max: 50
    triggerEvent: true
  },
  series: [{
    name: 'issue',
    connectNulls: false,
    type: 'line',
    symbolSize: 10,
     // 'triangle', 'diamond', 'pin', 'arrow', 'none'
    symbol: 'triangle', 
    areaStyle: {
      origin: 'start'
    },    
    data: [
      ["2016-01-01 00:00:00", 5],
      ["2016-01-02 00:00:00", 15],
      ["2016-01-03 00:00:00", null],
      ["2016-01-04 00:00:00", 11],
      ["2016-01-05 00:00:00", 35]
    ]
  }]
};


myChart.setOption(option);
myChart.on('click',...