How do i add Custom images to pie Chart?

Question

After creating Pie Chart, I would like to add custom image in each of the Sector. I tried to add images but could not. can anyone pls help me in this. Thank you in advance.

I want something like in the image This is what i tried, following is my code. Thank you in advance

<style>
    .pieContainer {
        height: 100px;
    }
    .pieBackground {
        background-color: grey;
        position: absolute;
        width: 100px;
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: -1px 1px 3px #000;
        -webkit-box-shadow: -1px 1px 3px #000;
        -o-box-shadow: -1px 1px 3px #000;
        box-shadow: -1px 1px 3px #000;
    }
    .pie {
        position: absolute;
        width: 100px;
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
        clip: rect(0px, 50px, 100px, 0px);
    }
    .hold {
        position: absolute;
        width: 100px;
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
        clip: rect(0px, 100px, 100px, 50px);
    }
    #pieSlice1 .pie {
        background-color: #1b458b;
        -webkit-transform:rotate(50deg);
        -moz-transform:rotate(50deg);
        -o-transform:rotate(50deg);
        transform:rotate(50deg);
    }
    #pieSliceBlue .pie {
        background-color: #1b458b;
        -webkit-transform:rotate(100deg);
        -moz-transform:rotate(100deg);
        -o-transform:rotate(100deg);
        transform:rotate(100deg);
    }
    #pieSliceBlue2 {
        -webkit-transform:rotate(100deg);
        -moz-transform:rotate(1000deg);
        -o-transform:rotate(100deg);
        transform:rotate(100deg);
    }
    #pieSliceBlue2 .pie {
        background-color:#FF0;
        -webkit-transform:rotate(140deg);
        -moz-transform:rotate(140deg);
        -o-transform:rotate(140deg);
        transform:rotate(140deg);
    }
    #pieSliceRed {
        -webkit-transform:rotate(220deg);
        -moz-transform:rotate(220deg);
        -o-transform:rotate(220deg);
        transform:rotate(220deg);
    }
    #pieSliceRed .pie {
        background-color: #cc0000;
        -webkit-transform:rotate(140deg);
        -moz-transform:rotate(140deg);
        -o-transform:rotate(140deg);
        transform:rotate(140deg);
    }
</style>

<div id="pieContainer">
    <div class="pieBackground"> </div>
    <div id="pieSlice1" class="hold">
        <div class="pie"></div>
    </div>
    <div id="pieSliceBlue" class="hold">
        <div class="pie"></div>
    </div>
    <div id="pieSliceBlue2" class="hold">
        <div class="pie"> </div>
    </div>
    <div id="pieSliceRed" class="hold">
        <div class="pie"></div>
    </div>
</div>

Excellent and what about your code? How can we solve your problem without your code????? — Gajotres, May 27 '14 at 09:30

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

Use the following process:

Add position:relative to the piecontainer
Add a position:absolute image element to match the coordinates of each slice
Use clip:rect on each image to match the corresponding rectangle of each slice

References

vml clipping mask

edited May 23 '17 at 12:32

Community

1
1

answered Oct 04 '16 at 06:46

Paul Sweatte

24,148
7
127
265

How do i add Custom images to pie Chart?

1 Answers1