RadarChart questions

Question

I have modified the RadarChart sample.

• I'd like to draw full circles on dataset values, on the blue line in the screenshot below.
• I'd like to draw grid lines only on x axis and set its color to black (now red) and get rid of the scale values on the y axis and set line color to black.

The state is the following:

{
        data: {
          $set: {
            dataSets: [
              {
                values: [
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 }
                ],
                label: "Too High",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#D9C5C5"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 }
                ],
                label: "High",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#F1DB93"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 }
                ],
                label: "OK",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#CADFB8"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 }
                ],
                label: "Too Low",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#D9C5C5"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 }
                ],
                label: "DS 1",
                config: {
                  color: processColor("#0022F5"),
                  lineWidth: 2,
                  drawValues: false,
                  drawCircles: true,
                  circleColor: processColor("#0022F5"),
                  drawCircleHole: false,
                }
              }
            ]
          }
        },
        xAxis: {
          $set: {
            valueFormatter: ["PRV", "HR", "RR", "O2", "E.A.", "ASI", "PAI"]
          }
        },
        yAxis: {
          $set: {
            axisMinimum: 0,
            axisMaximum: 1
          }
        }
      }

And the control props:

<RadarChart
            style={styles.chart}
            data={this.state.data}
            xAxis={this.state.xAxis}
            yAxis={this.state.yAxis}
            chartDescription={{ text: "" }}
            legend={this.state.legend}
            drawWeb={true}
            webLineWidth={0}
            webLineWidthInner={1}
            webAlpha={255}
            webColor={processColor("red")}
            webColorInner={processColor("green")}
            skipWebLineCount={0}
            onSelect={this.handleSelect.bind(this)}
            onChange={event => console.log(event.nativeEvent)}
            rotationAngle={-115}
          />

Steps to Reproduce the Problem

It seems that:

                  drawCircles: true,
                  circleColor: processColor("#0022F5"),
                  drawCircleHole: false,

Has no effect regarding the circles.

I do not know what to do with the y scale.

Any help appreciated.

Note that I'm using react-native-charts-wrapper over mpandroidchart.

Any help appreciated.

---

EDIT 10/17/2019

Long story short, I've created a webAlphaInner property for the RadarChart, which allows me to make the "inner-web" lines transparent. No circle on the blue line.

Answer 1

1. Drawing Circle - I am unable to find Radar charts having a drawCircle support.

2. For the second query

   • Changing red to black - This red is webColor. webColor={processColor("black")}

   • Get rid of scale - In Yaxis set enabled: false,

   • Set Line color to black- In this I am assuming you mean the green color line. webColorInner={processColor("black")}

Here are the complete code snippet
State

{
        data: {
          $set: {
            dataSets: [
              {
                values: [
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 }
                ],
                label: "Too High",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#D9C5C5"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 }
                ],
                label: "High",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#F1DB93"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 }
                ],
                label: "OK",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#CADFB8"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 }
                ],
                label: "Too Low",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#D9C5C5"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 }
                ],
                label: "DS 1",
                config: {
                  color: processColor("#0022F5"),
                  lineWidth: 2,
                  drawValues: false,
                  drawCircles: true,
                  circleColor: processColor("#0022F5"),
                  drawCircleHole: false,
                },

              }
            ]
          }
        },
        xAxis: {
          $set: {
            valueFormatter: ["PRV", "HR", "RR", "O2", "E.A.", "ASI", "PAI"],
          }
        },
        yAxis: {
          $set: {
            axisMinimum: 0,
            axisMaximum: 1,
            enabled: false,
          }
        }
      }

Component

 <RadarChart
            style={styles.chart}
            data={this.state.data}
            xAxis={this.state.xAxis}
            yAxis={this.state.yAxis}
            chartDescription={{ text: "" }}
            legend={this.state.legend}
            drawWeb={true}
            webLineWidth={1}
            webLineWidthInner={2}
            webAlpha={255}
            webColor={processColor("black")}
            webColorInner={processColor("black")}
            skipWebLineCount={0}
            onSelect={this.handleSelect.bind(this)}
            onChange={event => console.log(event.nativeEvent)}
            rotationAngle={-115}
          />