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.

Add comment

Bartłomiej Malanowski staff pro premium answered 6 years ago

1 0 Best answer

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

Add comment

jouvrard pro answered 6 years ago

0 0 Best answer

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. :)

Add comment

Write

Create snippet

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

jouvrard

Pro User

898Support score
46Questions 70Answers

1Snippets likes 11Snippets