Ajay Kumar Ajay Kumar - 23 days ago 7
jQuery Question

Jquery Circle Progress Bar text new line

Hi Guys I'm working on jQuery Circle Progress Bar (Circlefuljs Plugin) by refering https://github.com/pguso/jquery-plugin-circliful, in this every thing works fine, In this I'm having a text parameter where I can give some string text that will show inside the circle, My issue is if my text size is big the text is overlaping outside of the circle, So I'm trying to give an new line, but it is not working, please see my snippet here https://jsfiddle.net/heh12u5v/

<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
<div id="test-circle"></div>
</div>
var value = 75
$(document).ready(function() {
$("#test-circle").circliful({
animationStep: 5,
foregroundBorderWidth: 15,
backgroundBorderWidth: 15,
percent: value,
iconPosition: 'middle',
text: "This circle \n for demo",
});
});


I tried by using
\n
in the text parameter so it can be break to new line, but it is not working, so guys please help me to sort out this solution, it will be very great full for me. Thanks in advance

Answer

This plugin convert your text to SVG image text. You can add multiline with </tspan> tag. And place correctly your main text x,y with jquery attr() parameter.

You can find more informations here: https://www.safaribooksonline.com/library/view/svg-text-layout/9781491933817/ch04.html

Please try below. Working fine.

var value = 75
$(document).ready(function() {
  $("#test-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 15,
    backgroundBorderWidth: 15,
    percent: value,
    iconPosition: 'middle',
    text: 'This circle <tspan  y="113" x="101">for demo</tspan>'
  });
  $(".circliful text:eq(0)").attr("y",94)
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/css/jquery.circliful.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/circliful/1.0.2/js/jquery.circliful.min.js"></script>
<div style="width:400px">
	<div id="test-circle"></div>
</div>

Comments