CODEWITHSUNDEEP
cssreact-native
Alex
Alex

Reputation: 147

Creating a custom chart in React Native using CSS

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.

enter image description here

This is what I've got so far: enter image description here

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.

Upvotes: 1

Views: 291

Answers (1)

Alex
Alex

Reputation: 925

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.

Upvotes: 1

Related Questions