react-native-chart-kit icon indicating copy to clipboard operation
react-native-chart-kit copied to clipboard

StackedBarChart show not correct

Open iita71737 opened this issue 1 year ago • 6 comments

I use StackedBarChart but got incorrect data on chart.

I customized my formatYLabel for yAxis. but when I use it , my chart show incorrect.

 <StackedBarChart
            formatYLabel={() => yLabelIterator.next().value}
            style={[style, { paddingRight: 0 }]}
            data={{
              labels: ["Test1", "Test2"],
              legend: ["L1", "L2", "L3"],
              data: [
                [0, 3, 0],
                [1, 0, 3],
              ],
              barColors: ["#dfe4ea", "#ced6e0", "#a4b0be"]
            }}
            chartConfig={chartConfig}
            width={screenWidth * 0.9}
            // height={screenHeight}
            height={256}
            yLabelsOffset={32}
            yAxisLabel={t('')}
            yAxisSuffix={t('')}
            yAxisInterval={1}
            xLabelsOffset={-4}
            decimalPlaces={1}
            segments={6}
            blurOpacity={0.3}
            hideLegend={true}
            decorator={() => {
              return tooltipPos.visible ? (
                <View>
                  <Svg>
                    <Rect
                      x={tooltipPos.x - 15}
                      y={tooltipPos.y + 10}
                      width="40"
                      height="30"
                      fill="black"
                    />
                    <TextSVG
                      x={tooltipPos.x + 5}
                      y={tooltipPos.y + 30}
                      fill="white"
                      fontSize="16"
                      fontWeight="bold"
                      textAnchor="middle">
                      {tooltipPos.value}
                    </TextSVG>
                  </Svg>
                </View>
              ) : null
            }}
            onDataPointClick={data => {
              let isSamePoint = tooltipPos.x === data.x && tooltipPos.y === data.y
              isSamePoint
                ? setTooltipPos(previousState => {
                  return {
                    ...previousState,
                    value: data.value,
                    visible: !previousState.visible
                  }
                })
                : setTooltipPos({
                  x: data.x,
                  value: data.value,
                  y: data.y,
                  visible: true
                })
            }}
          />

IMG_6956

iita71737 avatar Apr 07 '23 16:04 iita71737

@iita71737 how are you hiding the bar value labels?

image

my-name-is-nheo avatar Jul 01 '23 23:07 my-name-is-nheo

@iita71737 how are you hiding the bar value labels?

image

You mean the value on the bar top ? or Y-Axis Label? or X-Axis Label?

iita71737 avatar Jul 02 '23 03:07 iita71737

@iita71737 how are you hiding the bar value labels?

image

You mean the value on the bar top ? or Y-Axis Label? or X-Axis Label?

The bar values. Hopefully this SS will help.there are two when using StackedBarChart image

my-name-is-nheo avatar Jul 02 '23 14:07 my-name-is-nheo

@iita71737 how are you hiding the bar value labels?

image

You mean the value on the bar top ? or Y-Axis Label? or X-Axis Label?

The bar values. Hopefully this SS will help.there are two when using StackedBarChart image

<BarChart
  chartConfig={{
            showBarTops={false}
            showValuesOnTopOfBars={true}
}
/>

iita71737 avatar Jul 02 '23 17:07 iita71737

@iita71737 how are you hiding the bar value labels?

image

You mean the value on the bar top ? or Y-Axis Label? or X-Axis Label?

The bar values. Hopefully this SS will help.there are two when using StackedBarChart image


<BarChart

  chartConfig={{

            showBarTops={false}

            showValuesOnTopOfBars={true}

}

/>

Huh I'll try it later but I could've sworn those two props didn't exist in StackBarChart component

my-name-is-nheo avatar Jul 02 '23 17:07 my-name-is-nheo