<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});
}
}
This Pen doesn't use any external CSS resources.