<div class="main__wrapper" style="width:100%; height:600px;">
  <div id="main" style="width:100%; height:100%;">
    <!-- Chart will be here-->
  </div>
</div>
.main__wrapper{
  margin: 0 auto;
}

.tooltip{
  width: 220px;
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  padding:6px;
  border-radius: 4px;
  
  .tooltip__item{
    width:100%;
    font-size: 14px;
    margin: 5px 0px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
  }
  
  .tooltip__itemParagraph{
    margin:5px 0px;
  }
  
  .historyData{
    &:before{
      content: '';
      display: inline-block;
      width: 10px;
      height: 7.5px;
      margin-right: 5px;
      background-color: #4bc0c0;
      vertical-align: middle;
    } 
  }
  
  .forecastData{
    &:before{
      content: '';
      display: inline-block;
      width: 10px;
      height: 7.5px;
      margin-right: 5px;
      background-color: white;
      border: 2px solid #4bc0c0;
      vertical-align: middle;
    } 
  }
  
  .Confidence80{
    &:before{
      content: '';
      display: inline-block;
      width: 10px;
      height: 7.5px;
      margin-right: 5px;
      background-color: black;
      vertical-align: middle;
    } 
  }
  
  .Confidence95{
    &:before{
      content: '';
      display: inline-block;
      width: 10px;
      height: 7.5px;
      margin-right: 5px;
      background-color: red;
      vertical-align: middle;
    } 
  }
}
View Compiled 
let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);

const option = {
  "tooltip": {
    "trigger": "axis",
    "axisPointer": {
      "type": "line"
    },
    formatter : function (params) {
      let template = `<div class="tooltip">`
      params.forEach(d=>{
        if(d.seriesName.includes('Confidence')){
          let uniqueClassName = d.seriesName.split("% ").reverse().join("")
          template += `<div class="tooltip__item">
            <p class="${uniqueClassName} tooltip__itemParagraph">${d.seriesName}</p> 
            <p class="tooltip__itemParagraph"">${d.data[1]} ~ ${d.data[2]}</p>
          </div>`
        }else{
          if(d.color==="#4bc0c0"){
            template += `<div class="historyData tooltip__item">${d.seriesName} : ${d.value}</div>` 
          }else{
            template += `<div class="forecastData tooltip__item">${d.seriesName} : ${d.value}</div>`
          }
        }
      })
      template += `</div>`
      return template
    },     
    "backgroundColor": "#fff",
    "textStyle": {
      "color": "black"
    },
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
  },
  "title": {
    "text": "Costs ($)"
  },
  "legend": {
    "x": "center",
    "y": "bottom",
    "selectedMode": false,
    "data": [
      {
        "name": "Costs",
        "icon": "bar"
      },
      {
        "name": "Forecast",
        "icon": `image://data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAdADMDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9p/gj8EPBeqfBfwhdXXg/wvcXNxollLLLLpUDvK7QISzErkkk5JPWun/4UD4D/wChJ8I/+Ce3/wDiKX4Bf8kJ8Ff9gGx/9J4662umtWqe0l7z3fU8XLcuwjwlJulH4Y/ZXZeRyP8AwoHwH/0JPhH/AME9v/8AEUf8KB8B/wDQk+Ef/BPb/wDxFddRWXtqn8z+87f7Nwn/AD6j/wCAr/I5H/hQPgP/AKEnwj/4J7f/AOIo/wCFA+A/+hJ8I/8Agnt//iK66ij21T+Z/eH9m4T/AJ9R/wDAV/kfnH+2Z4Y03w1+0n4ksdO03T7Czh+y+XBb26RRx5tYWOFUADJJPHcmir37c/8AydN4o/7dP/SSCivvMG26EG+y/I/lDiKEY5tioxVkqk//AEpn3D8Av+SE+Cv+wDY/+k8ddbXxj8Pf+Ckn/CF+ANC0f/hC/tP9k6db2fnf2vs83y4lTdt8k4zjOMnHrWx/w9K/6kX/AMrX/wBor5WrlOKc21Hr3X+Z++YHxByCnhqdOeI1UUn7k90l/dPraivkn/h6V/1Iv/la/wDtFH/D0r/qRf8Aytf/AGis/wCyMX/J+K/zOr/iIvD3/QR/5JP/AORPraivkn/h6V/1Iv8A5Wv/ALRR/wAPSv8AqRf/ACtf/aKP7Ixf8n4r/MP+Ii8Pf9BH/kk//kTyf9uf/k6bxR/26f8ApJBRXC/H741D4vfFvVvEX9mHT/7R8n/R/tPm+Xshjj+9sXOdmeg60V9jhaU40YRktUl+R/OOeY6hXzLEV6UrxlObTs9U5NrdX2P/2Q==`
      }
    ],
    "textStyle": {
      fontSize: 16,
      color: 'blue',
    }
  },
  "xAxis": {
    "data": [
      "2020-12-01",
      "2021-01-01",
      "2021-02-01",
      "2021-03-01",
      "2021-04-01",
    ]
  },
  "series": [
    {
      "type": "bar",
      "name": "Costs",
      "itemStyle": {
        "normal": {
          "color": "#4bc0c0"
        }
      },
      "data": [
        25658.27,
        25797.17,
        24905.34,
        {
          "value": 22896.3,
          "itemStyle": {
            "normal": {
              "color": "#fff",
              "borderColor": "#4bc0c0"
            }
          }
        },
        {
          "value": 23968.49,
          "itemStyle": {
            "normal": {
              "color": "#fff",
              "borderColor": "#4bc0c0"
            }
          }
        }
      ]
    },
    {
      "type": "line",
      "name": "Forecast"
    }
  ],
  "yAxis": {}
}

option && myChart.setOption(option);

window.onresize = () => {
  const that = this
  if(document.body.clientWidth > 320){
    myChart.resize({width:document.body.clientWidth});
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js