Chartjs-How to hide a portion of chart or a div in Angular?

by

0👍

✅

I would say Hiding the lower part of the div container the chart is the easiest to do.
You can use something like the following css on your div:

.exerpt {
  position: relative;
  height: 100px;
  border: 1px solid gray;
  overflow: hidden;
}

You can also add some bottom shadow to hint to the users that there is more content:

.exerpt::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to top, gray, transparent);
}

After that you can use Angular router to navigate to a new page with the whole chart, or just an click event to change the div’s height to 100%.
Here is a demo for more details: link

Leave a comment