Barcolor

[shadat12]

Hello, Sir,

I use your easy pie chart plugin https://github.com/rendro/easy-pie-chart

i have a question , I use demo panel bu jquery click function to change color

see the image

When i click red color in percent is change Black to Red But barcolor is not change

becoz barcolor is on js file .

can you plz tell me how can change is it by color ?

or is it possible to add the barcolor in css ?

---

HTML

                            </div>

CSS

.chart {
display: block;
position: relative;
}
.percent {
display: inline-block;
font-size: 1.6em;
height: 150px;
line-height: 150px;
text-align: center;
width: 150px;
z-index: 2;
}
.chart canvas {
left: 50%;
margin-left: -75px;
position: absolute;
top: 0;
}
.percent:after {
content: '%';
margin-left: .1em;
font-size: .8em;
}

---

js

$(".chart").appear(function () {
$(".chart").easyPieChart({
barColor: "#00B2CA",
scaleColor: "#00B2CA",
size: "150",
lineWidth: 5,
animate: 2000,
onStep: function (e, t, n) {
$(this.el).find(".percent").text(Math.round(n))
}
})
});

i want to change teh barColor: "#00B2CA", by click that i do in percent

[josezulu]

Hi, If i understand you correctly, you want to click on a color and change the color of the bar.

You have to:

1. update the color
2. update the chart to the same value it already is. This will force a color change to the color you updated in point 1).

Try this:
$(".chart").data('easyPieChart').options['barColor'] = "#00B2CA";
$(".chart").data('easyPieChart').update(98);

(where 98 is the value the chart currently has, If you set it to another value, the chart will animate the bar to the new value and new color. By setting it to the same value, it won't animate but it will change the color).

I hope this helps.

[ranjitsachin]

Please can you help how I can achieve same thing in Angular JS? Currently I'm trying with below code, but there is no luck.

$scope.options = {
animate:{
duration:2000,
enabled:true
},
barColor:'#005A04',
scaleColor:true,
lineWidth:20,
lineCap:'circle'
};
Thanks for your time...

[lannodev]

@josezulu how to do that using angular?

[josezulu]

I'm sorry, I don't know Angular :(

[AustinHatem]

Hello! Sorry i'm late but to solve this problem in Angular2+ you can follow these steps:

1. Create a ViewChild of the easypiechart in component.html
   <easy-pie-chart #pieChart ></easy-pie-chart>
2. Add the viewchild to the component.ts
   @ViewChild('pieChart') pieChart:any;
3. Whenever you want to update the color call this:
   this.pieChart.pieChart.options['barColor'] = "#00B2CA";
   I update it on ValueChanges but you can update it whenever.

You can edit any options you want that way in Angular2+.

[ipehimanshu]

Hello

How to import into angular 16