Changing the color of y-axis and passing a new color range

[AlmahaAlmalki]

Hi,

I tried to change the color of the y-axis, but for some reason is not passing the prop.

This's my code:

let methods = {
      data: this.state.dataset,
      x:'year',
      y:'publications',
      xConfig:{
        title:'Year',
      },
      yConfig:{
        title:'Publications',
      },
      yAxis: {
        barConfig: {
          stroke: '#ffffff'
        }
      },
      stacked: true,
    }

    let stackViz = false
    if (this.state.dataset && this.state.dataset.length > 1) {
      stackViz =  <BarChart config={methods} />
    }

Also, how can I pass a new range of colors? I tried a couple of ways, but it didn't work, and I didn't find any example that has a similar case.

Thanks :)!

[davelandry]

There is no yAxis method, only yConfig, so your object should look like this:

let methods = {
  data: this.state.dataset,
  x: 'year',
  y: 'publications',
  xConfig:{
    title: 'Year',
  },
  yConfig: {
    barConfig: {
      stroke: '#ffffff'
    },
    title:'Publications',
  },
  stacked: true
}

There's currently no way to override the auto-assigned colors using an array, but you could supply your own color scale using the shapeConfig and an ordinal d3 scale:

import {scaleOrdinal} from "d3-scale";

const colorScale = scaleOrdinal().range(["red", "green", "blue"]);

let methods = {
  ...
  shapeConfig: {
    fill: d => colorScale(d.id)
  }
  ...
};