I am currently relying on Google Translator, so there may be errors in the translation.
The issue I am facing is that when I add a parameter with the "fillColor: '#f4f5f9'", the wheel covers one of the elements of Multiple Bars.
I have modified the Multiple Bars from 4 to 2 based on the following page: https://github.com/pguso/jquery-plugin-circliful
The same problem persists even in the original script. Here is a demo of the original script: https://jsfiddle.net/0c8qaqaj/41/
Below are images illustrating the current situation and what I aim to achieve.
<div class="row">
<div class="col-lg-2">
<div id="test-circle6">
<div id="textInner">
<div>3h 20'</div>
<div>2h</div>
</div>
</div>
<div id="test-circle7">
<div id="textInner">
<div>4h 35'</div>
<div>3h 20'</div>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() { // 6,32 5,38 2,34
$("#test-circle6").circliful({
animation: 1,
animationStep: 5,
foregroundBorderWidth: 10,
backgroundBorderWidth: 20,
textSize: 28,
textStyle: 'font-size: 12px;',
textColor: '#666',
multiPercentage: 1,
percentages: [
{'percent': 32, 'color': '#e94e25'},
{'percent': 20, 'color': '#878786'}
],
multiPercentageLegend: 1,
replacePercentageByText: '',
backgroundColor: 'none',
fillColor: 'none',
icon: 'none',
iconPosition: 'middle'
});
$("#test-circle7").circliful({
animation: 1,
animationStep: 5,
foregroundBorderWidth: 10,
backgroundBorderWidth: 20,
textSize: 28,
textStyle: 'font-size: 12px;',
textColor: '#666',
multiPercentage: 1,
percentages: [
{'percent': 43, 'color': '#e94e25'},
{'percent': 32, 'color': '#878786'}
],
multiPercentageLegend: 1,
replacePercentageByText: '',
backgroundColor: 'none',
fillColor: '#f4f5f9',
icon: 'none',
iconPosition: 'middle'
});
});
</script>
I have attempted to resolve this issue but have been unable to do so. Any hints or assistance in resolving this would be greatly appreciated.
Thank you and best regards.