Question: specific labels

[hgjura]

I am using this VictoryChart + VictoryLine in a VictoryGroup in Ract Native with typescript. I have a additional question:

• Question: I have a requirement, where only certain specific labels need to be visible, with specific style. For example, with the sample data below, need to show 1) lowest value (in red) highest value (in green) and latest value (in black). In this case, earnings, 1, 6 and 5(for chart) and 6 (for line). And this would be for both bars and the line. Is this possible?

const data = [
  { quarter: 1, earnings: 1 },
  { quarter: 2, earnings: 2 },
  { quarter: 3, earnings: 5 },
  { quarter: 4, earnings: 4 },
];

const data1 = [
  { quarter: 1, earnings: 2 },
  { quarter: 2, earnings: 3 },
  { quarter: 3, earnings: 6 },
  { quarter: 4, earnings: 5 },
];



 <VictoryGroup
          animate={{
            duration: 2000,
            onLoad: { duration: 1000 },
          }}
          style={{
            parent: {
              backgroundColor: 'pink',
            },
          }}
          labels={({ datum }) => datum.y}
          padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
          width={width}
          height={height}
          theme={VictoryTheme.material}>
          <VictoryBar
            data={data}
            x="quarter"
            y="earnings"
            labels={({ datum }) => datum.y}
            style={{
              labels: {
                fontSize: 15,
                fill: '#c43a31',
                padding: 15,
              },
            }}
          />
          <VictoryLine
            style={{
              data: {
                stroke: '#c43a31',
              },
              labels: {
                fontSize: 10,
                fill: 'black',
                padding: 5,
              },
            }}
            data={data1}
            x="quarter"
            y="earnings"
            labels={({ datum }) => datum.x}
          />
        </VictoryGroup>

[hgjura]

I am thinking that this could be done through: labelComponent={<VictoryLabel />} but I am not able to figure out how to pass the data/datum to each individual label component in order to make it visible or not, and customize styles. Any samples?

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.