Victory charts, how to change axis and label colors

Question

this should be a very simple thing to do, but for the life of me I cannot achieve the effect I want, I have a chart, on a dark background, which means I want to change the color of the labels to white, however I cannot achieve this.

The code I'm using:

<VictoryChart
            width={WIDTH}
          // theme={VictoryTheme.material}
          >
            {/* <VictoryBar data={data} x="quarter" y="earnings" /> */}
            <VictoryArea data={outcome} x="quarter" y="earnings" style={{ data: { fill: '#0074B7', fillOpacity: 0.7, stroke: '#0C7BBB', strokeWidth: 1 } }} />
            {/* <VictoryArea data={income} x="quarter" y="earnings" style={{ data: { fill: '#9BC578', fillOpacity: 0.7, stroke: '#37B875', strokeWidth: 1 } }} /> */}
          </VictoryChart>

Any help is appreciated.

Bayne

Answer 1

I got my charts numbers to change but I am using the custom theming to do it but I would imagine its similar. I have posted an example below

const chartTheme = {
  axis: {
    style: {
      tickLabels: {
        // this changed the color of my numbers to white
        fill: 'white',
      },
    },
  },
};


      <VictoryChart theme={ chartTheme }>
        <VictoryAxis label="Body Weight" />
        <VictoryAxis dependentAxis label="Time" />
        <VictoryLine
          data={ [
            { x: 1, y: 2 },
            { x: 2, y: 3 },
            { x: 3, y: 5 },
            { x: 4, y: 4 },
            { x: 5, y: 7 },
          ] }
        />
      </VictoryChart>

Bullpen

Answer 2

You can add VictoryAxis, and modify the respective x- and y- axes and labels individually:

<VictoryChart
  width={WIDTH}
>
  <VictoryAxis
    tickLabelComponent={<VictoryLabel dy={0} dx={10} angle={55}/>}
    tickValues={xAxisTickValues}
    tickFormat={dateLabels}
    style={{
      axis: {
        stroke: 'white'  //CHANGE COLOR OF X-AXIS
      },
      tickLabels: {
        fill: 'white' //CHANGE COLOR OF X-AXIS LABELS
      }, 
      grid: {
          stroke: 'white', //CHANGE COLOR OF X-AXIS GRID LINES
          strokeDasharray: '7',
      }
    }}
  />
  <VictoryAxis
    dependentAxis
    tickFormat={(y) => y}
    style={{
      axis: {
        stroke: 'white'  //CHANGE COLOR OF Y-AXIS
      },
      tickLabels: {
        fill: 'white' //CHANGE COLOR OF Y-AXIS LABELS
      }, 
      grid: {
        stroke: 'white', //CHANGE COLOR OF Y-AXIS GRID LINES
        strokeDasharray: '7',
      }
    }}
  />
  <VictoryArea 
    data={outcome} 
    x="quarter" 
    y="earnings" 
    style={{ 
      data: { 
        fill: '#0074B7', 
        fillOpacity: 0.7, 
        stroke: '#0C7BBB', 
        strokeWidth: 1 
      } 
    }} 
  />
</VictoryChart>

Joann

Do you know how to change the font family within styles? – Bipack

@Bipack Not off top of my head. See docs here, use ctrl+F to find "fontFamily" on this page for VictoryLabel formidable.com/open-source/victory/docs/victory-label -- maybe that will help (adding it in 'style' brackets) – Joann