CODEWITHSUNDEEP
javascriptjqueryhtmlcss
code-8
code-8

Reputation: 58662

How to create an inner border of a donut pie chart?

I have a donut pie chart progress bar. I want to give them an inner border, I've tried

.pie{

  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  width:70px;
  height:70px;
  border:2px solid black;
  border-radius:50%;

}

I want my pie chart to look like this :

enter image description here

I keep getting this as my result :

enter image description here

Here is my Fiddle.

Upvotes: 0

Views: 1587

Answers (2)

tbc
tbc

Reputation: 123

The problem with your code is that easyPieChart is offseted with the border, since the chart is drawn using a canvas.

You can however use box-shadow instead, replace the border line with:

box-shadow: inset 0 0 0 11px black;
-moz-box-shadow: inset 0 0 0 11px black;
-webkit-box-shadow: inset 0 0 0 11px black;

That should do the trick for you.

By the way, the CSS width and height are being overridden to 110,110 and not 70,70

EDIT:

Here is the working code for the inner border WITHOUT the outer hardly seen outer border:
HTML:

<div class="pie" data-percent="90" >
    <span>6</span>
</div>

CSS:

.pie {
    box-sizing:border-box;
    box-shadow: inset 0px 0px 0 10px black;
    border-radius:50%;
}

.pie canvas {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 110px;
    height: 110px;
}

JS:

$('.pie').easyPieChart({
    barColor: '#62ae41',
    scaleColor: false,
    lineWidth: 10,
    trackWidth: 10,
    animate: false,
    lineCap: 'square',
    size: 110
});
$('.pie').css('width', '108px');
$('.pie').css('height', '108px');
$('.pie').css('line-height', '108px');

and voila, the pie chart of dreams.

all in one jsfiddle

Explanation:

For the most part, this is the same as your fiddle, what changed was:

  • the size of pie chart is added to the options
  • the canvas is shifted to hide the outer border,
  • the original div size is decreased so all the shadow-box sets inside the generated canvas.

And that's it.

PS: I hate it when I have to change the style of generated code, but I HAD TO play with the generated canvas

Upvotes: 1

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

It's not perfect but you can play with the top, left, width, bottom values, just add:

.easyPieChart *::before {
    border: 1px solid black;
    border-radius: 50%;
    bottom: 9px;
    content: " ";
    display: block;
    left: 8px;
    position: absolute;
    top: 10px;
    width: 83%;
    z-index: 99;
}

http://jsfiddle.net/gu3aL84e/6/

Upvotes: 2

Related Questions