CSS for the charts
Some CSS you can be an external file as usual. Some CSS must be together with the ECharts code.
CSS code in external file
#chrt_cnt { display: flex; flex-direction: column; width: auto; height: auto; gap: 15px; margin-bottom: 25px; } article { clear: both; } #chrt1, #chrt2, #chrt3 { display: flex; justify-content: center; align-items: center; position: relative; width: auto !important; height: inherit !important; max-height: 350px; background-color: #fff; border-radius: 10px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12),0px 1px 5px 0px rgba(0, 0, 0, 0.2); padding: 20px; } @media screen and (min-width: 2000px) { #chrt_cnt { flex-direction: row; width: 100%; max-height: 230px; } #chrt1, #chrt2, #chrt3 { display: flex; justify-content: center; align-items: center; background-color: #fff; position: relative; width: auto !important; height: inherit !important; border-radius: 10px; height: auto; flex-grow: 1; max-width: 32.3%; } canvas#chrt1, canvas#chrt2, canvas#chrt3 { height: auto !important; width: 100% !important; } }