I have the following HTML structure that replicates a pie chart:
$('#clickthis').click(function(e){
e.preventDefault();
$('.circle-chart').css('background: conic-gradient(green 0% 60%, grey 60% 100%)')
});.circle-chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(green 0% 30%, grey 30% 100%);
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/*.circle-segment {
width: 0%;
height: 0%;
background-color: grey;
border-radius: 50%;
}*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="circle-chart">
<!--<div class="circle-segment"></div>-->
</div>
<button id="clickthis">
Click Me
</button>The value of the percentage in conic-gradient is coming from a JS variable. So if the value is 30% then:
background: conic-gradient(green 0% 30%, grey 30% 100%);
but if the value is 60% it should be:
background: conic-gradient(green 0% 60%, grey 60% 100%);
How can I update the conic gradient value using JS? The JS I tried is not doing anything and is not giving any error.
You need to sign in to view this answers
Leave feedback about this