Open Jigs6720 opened 1 year ago
is there any way to add black Lines in each and every bar for Horizontal Bar Chart in react native?
i am trying to add this Black marks in single bar but it is not working it over rides another bar with that color.
here is my code,
` const marker = { enabled: true, markerColor: processColor(colors.text), textColor: processColor(colors.border), markerFontSize: 14, }; //bar chart const [legend, setLegend] = useState({ enabled: true, textSize: 12, form: "SQUARE", formSize: 14, textColor: processColor(colors.text), xEntrySpace: 10, yEntrySpace: 5, formToTextSpace: 10, wordWrapEnabled: true, maxSizePercent: 0.5, }); const [dataSet, setDataSet] = useState({ config: { barWidth: 0.9,
formToTextSpace: 10, }, dataSets: [ { values: [ { y: 20 }, { y: 30 }, { y: 10 }, { y: 0 }, { y: 0 }, { y: 35 }, { y: 0 }, { y: 0 }, { y: 28 }, { y: 0 }, { y: 30 }, { y: 15 }, { y: 25 }, { y: 20 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 25 }, { y: 15 }, { y: 35 }, { y: 5 }, { y: 0 }, { y: 15 }, ].reverse(), label: "Correct", config: { drawValues: false, color: processColor('green'), barShadowColor: processColor("lightgrey"), highlightAlpha: 90, highlightColor: processColor("transparent"), }, }, { values: [ { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 35 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 10 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 70 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 30 }, { y: 0 }, { y: 60 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, ].reverse(), label: "Partially Correct", config: { drawValues: false, color: processColor(Colors.additionalYellowColor1), barShadowColor: processColor("lightgrey"), highlightAlpha: 90, highlightColor: processColor("transparent"), }, }, { values: [ { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 60 }, { y: 0 }, { y: 120 }, { y: 0 }, { y: 0 }, { y: 70 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 40 }, { y: 0 }, { y: 80 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 90 }, { y: 0 }, ].reverse(), label: "Incorrect", config: { drawValues: false, color: processColor('red'), barShadowColor: processColor("lightgrey"), highlightAlpha: 90, highlightColor: processColor("transparent"), }, }, { values: [ { y: 10 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, { y: 0 }, ].reverse(), label: "Average Time", config: { // group: { // fromX: 5, // required // groupSpace: 0.5, // required // barSpace: 0.1, // required // }, drawValues: false, color: processColor("#111"), barShadowColor: processColor("lightgrey"), highlightAlpha: 90, highlightColor: processColor("transparent"), }, }, ],
}); const [xAxis, setxAxis] = useState({ drawGridLines: false, valueFormatter: [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", ].reverse(), position: "BOTTOM", granularityEnabled: true, granularity: 1, labelCount: 17, textColor: processColor(colors.text), }); const [yAxis, setyAxis] = useState({ right: { enabled: false, drawGridLines: false, granularityEnabled: false, granularity: 0, textColor: processColor(colors.text), }, left: { textColor: processColor(colors.text),
drawGridLines: false, granularityEnabled: true, granularity: 1, labelCount: 3, axisMinimum: 0, },
}); `
<HorizontalBarChart style={{ flex: 1 }} data={dataSet} xAxis={xAxis} yAxis={yAxis} marker={marker} pinchZoom={false} extraOffsets={{ bottom: Platform.OS === "ios" ? 0 : 15, top: Platform.OS === "ios" ? 25 : 5, }} doubleTapToZoomEnabled={false} animation={{ durationX: 1000 }} legend={legend} chartDescription={{ text: "" }} gridBackgroundColor={processColor("#ffffff")} drawBarShadow={false} drawValueAboveBar={true} drawHighlightArrow={true} onSelect={handleSelect} onChange={(event) => console.log(event.nativeEvent)} />
i am trying to add this Black marks in single bar but it is not working it over rides another bar with that color.
here is my code,
` const marker = { enabled: true, markerColor: processColor(colors.text), textColor: processColor(colors.border), markerFontSize: 14, }; //bar chart const [legend, setLegend] = useState({ enabled: true, textSize: 12, form: "SQUARE", formSize: 14, textColor: processColor(colors.text), xEntrySpace: 10, yEntrySpace: 5, formToTextSpace: 10, wordWrapEnabled: true, maxSizePercent: 0.5, }); const [dataSet, setDataSet] = useState({ config: { barWidth: 0.9,
}); const [xAxis, setxAxis] = useState({ drawGridLines: false, valueFormatter: [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", ].reverse(), position: "BOTTOM", granularityEnabled: true, granularity: 1, labelCount: 17, textColor: processColor(colors.text), }); const [yAxis, setyAxis] = useState({ right: { enabled: false, drawGridLines: false, granularityEnabled: false, granularity: 0, textColor: processColor(colors.text), }, left: { textColor: processColor(colors.text),
}); `
<HorizontalBarChart style={{ flex: 1 }} data={dataSet} xAxis={xAxis} yAxis={yAxis} marker={marker} pinchZoom={false} extraOffsets={{ bottom: Platform.OS === "ios" ? 0 : 15, top: Platform.OS === "ios" ? 25 : 5, }} doubleTapToZoomEnabled={false} animation={{ durationX: 1000 }} legend={legend} chartDescription={{ text: "" }} gridBackgroundColor={processColor("#ffffff")} drawBarShadow={false} drawValueAboveBar={true} drawHighlightArrow={true} onSelect={handleSelect} onChange={(event) => console.log(event.nativeEvent)} />