Changing min-chart color depend on percent


Topic: Changing min-chart color depend on percent

jouvrard pro asked 6 years ago

Hello, I begin to use the minimalist chart and it works well, but I would like to have a different color depending on the data-percent value. For example: between 0 and 40, the chart is red, 40 and 80 orange and more than 80, green. Is it possible to do that? I try to find some information in the official page but I found Nothing interresting.

Bartłomiej Malanowski staff pro premium answered 6 years ago

Hi, Jouvrard! Yes, it's possible. Also, it's very easy to do that. Just use this code:
$(function () {
  $('#minChart').easyPieChart({
    barColor: function (percent) {
      return (percent < 40 ? '#ff4444' : percent < 80 ? '#ffbb33' : '#00C851');
    },
    onStep: function (from, to, percent) {
      $(this.el).find('.percent').text(Math.round(percent));
    }
  });
});

jouvrard pro answered 6 years ago

Thank you very much. To do this, I use PHP to add a "data-color" tag in my html code with the color to display, but your solution is really better. :)
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.9
  • Device: PC
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags