# Circular Graphic

**URL:** <https://forums.fusetools.com/t/circular-graphic/3882>\
**Category:** How-to Discussions\
**Created:** [July 8, 2015, 1:33pm UTC](https://forums.fusetools.com/t/circular-graphic/3882 "2015-07-08T13:33:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [July 8, 2015, 1:33pm UTC](https://forums.fusetools.com/t/circular-graphic/3882/1 "2015-07-08T13:33:57Z")

</div>

Hi, Is posible to do a graphic like this?

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/eimBy9XUPEhW-legacy-files-zc1CyrEqEfW2br4c-JgrkYMcmqFq8CMcn2Rf2FgJU.png)

And animate it?

Thanks!

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 8, 2015, 2:05pm UTC](https://forums.fusetools.com/t/circular-graphic/3882/2 "2015-07-08T14:05:57Z")

</div>

Hi!

An easy appproach would be to do something like

```auto
<Circle>
    <Stroke Width="8">
        <LinearGradient>
            <GradientStop Offset="0" Color="#f0f" />
            <GradientStop Offset="1" Color="#f00" />
        </LinearGradient>
    </Stroke>
</Circle>

```

And then animate `StartAngle` and `EndAngle` on the circle. Wouldn’t give you the nice rounded endpoints though, for that you would have to do something a bit more advanced, using `Path` probably.

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [July 8, 2015, 2:25pm UTC](https://forums.fusetools.com/t/circular-graphic/3882/3 "2015-07-08T14:25:25Z")

</div>

Great! But how I use StartAngle and EndAngle? In the Circle?

```auto
<Circle StartAngle="0" EndAngle="0" >

```

Like this I get a error…

And how can I change the direction of the gradient?

Thanks!

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [July 8, 2015, 2:28pm UTC](https://forums.fusetools.com/t/circular-graphic/3882/4 "2015-07-08T14:28:38Z")

</div>

StartAngle and EndAngle is not in the current release. They will in the next one 🙂

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [July 8, 2015, 2:33pm UTC](https://forums.fusetools.com/t/circular-graphic/3882/5 "2015-07-08T14:33:02Z")

</div>

An example that will work in the next release.

[Video](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/M7XxsMq6eZDx-legacy-files-XcTKjVe5ngBdD5xf-lKTTbnVHxZE09Co9g11WLiOW.mov)

I’m using an image to fill the stroke. This is a conical gradient (which makes it linear in the direction of the stroke).

```auto
<App Theme="Basic">
    <Panel>
        <Panel Width="200" Height="200" Alignment="Center">
            <Panel ux:Name="Arrow"> <Image File="arrowright.png" Alignment="TopCenter"/>
            </Panel>

            <Circle StartAngleDegrees="0" LengthAngleDegrees="0" ux:Name="TheCircle">
                <Stroke Width="20">
                    <ImageFill File="gradient.jpg"/>
                </Stroke>
            </Circle>
        </Panel>

        <Slider Alignment="BottomCenter" Width="200">
            <ProgressRange>
                <Change Target="TheCircle.LengthAngleDegrees" Value="359.99"/>
                <Rotate Target="Arrow" Degrees="360"/>
            </ProgressRange>
        </Slider>
    </Panel>
</App>

```

Note I used `359.99` as the target angle since I just noticed we have an issue about using `360` now. I’ll get that fixed soon.

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [July 8, 2015, 2:40pm UTC](https://forums.fusetools.com/t/circular-graphic/3882/6 "2015-07-08T14:40:32Z")

</div>

Wow! Great! Thanks, I look forward to the next release!

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [July 28, 2015, 3:33pm UTC](https://forums.fusetools.com/t/circular-graphic/3882/7 "2015-07-28T15:33:11Z")

</div>

This Example is working in this release (v0.5.3166)? I try to do the same but with a ScrollingAnimation. But the Circle never showup…

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [July 28, 2015, 4:22pm UTC](https://forums.fusetools.com/t/circular-graphic/3882/8 "2015-07-28T16:22:26Z")

</div>

My Mistake! Work Perfect! 🙂