RadarChart questions - mpandroidchart

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

Drawing Circle - I am unable to find Radar charts having a
drawCircle support.
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}
/>