Echarts.js vs Chart.js

My goal was to find a chart library that combine speed, simplicity and versatility. I have played with Chart.js and Echart.js. Both was rather simple and covered many types of charts. But Chart.js was smaller and faster.

Both relies on CSS settings for a good part. Some settings you have to do in the script. Still problem with distortions in small screens. Hopefully I get some feedback so I can fix this issue as well.

In this race won Chart.js regarding speed. Any tip how to get rid of the distortion on Chart.js?

I am pretty sure that this is an CSS thing. Aspect ratio or something?

#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;
  }
}

EDIT. Found the solution. Added this to the Chart.js script:

        options: {
            responsive: true,
            maintainAspectRatio: false,
            aspectRatio: 1,
3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.