Creating a custom chart in React Native using CSS

Question

I'm trying to create a 'half donut' chart in React Native, using only CSS. The chart below is what I'm trying to recreate, but the segments are proving difficult.

This is what I've got so far:

Using this code:

customChart: {
  width: 200,
  height: 100,
  borderTopLeftRadius: 100,
  borderTopRightRadius: 100,
  borderWidth: 50,
  borderStyle: 'solid',
  borderColor: '#eee',
  borderBottomWidth: 0,
  overflow: 'hidden'
},

I just can't seem to get the segments to work. Any ideas or suggestions will be greatly appreciated.

Alex · Accepted Answer · 2017-03-09 10:55:04Z

You do it the right way, just put in the color sections. In the following example

.criteriometer {
  width: 100px;
  height: 50px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border: 50px solid transparent;
  border-bottom: 0;
  position: relative;
}

span {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-top-left-radius: 100px;
  border-width: 50px;
  border-style: solid;
  border-bottom: 0 !important;
  border-right: 0 !important;
  position: absolute;
  top: -50px;
  left: -50px;
  transform-origin: right bottom;
}

/* from right to left to solve z-index */
span:first-child {
  border-color: red;
  transform: rotate(90deg);
}
span:nth-child(2) {
  border-color: orange;
  transform: rotate(45deg);
}
span:nth-child(3) {
  border-color: green;
  transform: rotate(0deg);
}

<div class="criteriometer">
  <span></span>
  <span></span>
  <span></span>
</div>

A CodePen for this, written in less.

Collectives™ on Stack Overflow

Creating a custom chart in React Native using CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related