CartesianChartPropsMixin

Wiki ▸ API ▸ Mixins ▸ CartesianChartPropsMixin

This mixin provides common properties for all Cartesian-style charts.

Warning: since this software is still in its Alpha state, a chart that implements CartesianChartPropsMixin is NOT guaranteed to support all of its available properties.

Available Properties

(All properties can be overridden by passing in the property to the top level call of any chart that implements the mixin.)

• axesColor - the fill color of the axes

  • Type: React.PropTypes.string
  • Default: '#000'

• colors - a function that generates a color to be used for a fill. This is often implemented as a d3 ordinal color scale

  • Type: React.PropTypes.func
  • Default: d3.scale.category20c()

• colorAccessor - this return value of function is passed into colors

  • Type: React.PropTypes.func

  • Default: (d, idx) => idx where d is the datum being operated on, and idx is the index in the array of datums

  • How it is used:

    datumArray.map(function(d, idx) {
      var fill = props.colors(props.colorAccessor(d, idx));
      // pass fill to whatever you want to color, such as a line on a LineChart
    });

• data - this is the datum array, in the required format, that is passed into your chart

  • Type: React.propTypes.oneOfType([React.PropTypes.array, React.PropTypes.object])
  • Default: []

• xAxisFormatter - a string formatting function for the x-axis

  • Type: React.PropTypes.func
  • Default: none

• xAxisLabel - the x-axis label

  • Type: React.PropTypes.string
  • Default: none

• xAxisLabelOffset - distance between the xAxisLabel and the y-axis

  • Type: React.PropTypes.number
  • Default: 38

• xAxisTickCount - the number of ticks on the x-axis

  • Type: React.PropTypes.number
  • Default: none

• xAxisTickValues - the values of the x-axis

  • Type: React.PropTypes.array
  • Default: none

• xOrient - x-axis location

  • Type: React.PropTypes.oneOf(["top", "bottom"])
  • Default bottom

• yAxisFormatter - a string formatting function for the y-axis

  • Type: React.PropTypes.func
  • Default: none

• yAxisLabel - the y-axis label

  • Type: React.PropTypes.string
  • Default: none

• yAxisLabelOffset - distance between the yAxisLabel and the y-axis

  • Type: React.PropTypes.number
  • Default: 35

• yAxisTickCount - the number of ticks on the y-axis

  • Type: React.PropTypes.number
  • Default: none

• yAxisTickValues - the values of the y-axis

  • Type: React.PropTypes.array
  • Default: none

• yOrient - y-axis location

  • Type: React.PropTypes.oneOf(["left", "right"])
  • Default left