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 hexadecimal color string to be used for a fill. This is often implemented as one of the d3 ordinal color scales.

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

• colorAccessor - the return value of this 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:

    var thingsToRender = datumArray.map(function(d, idx) {
      return (
        <ThingToRender
          key={idx}
          ...
          fill={this.props(this.colorAccessor(d, idx))}
          ...
        />
      );
    });

• 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: []

• height - the height of the chart

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

• legend - turn the legend on or off

  • Type: React.PropTypes.bool
  • Default: false

• legendOffset - distance between the legend and the chart

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

• width - the width of the chart

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

• xAccessor - the function used to access the values from that data that will be mapped to the x-axis

  • Type: React.PropTypes.func
  • Default: (d) => d.x

• 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 x-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"

• yAccessor - the function used to access the values from that data that will be mapped to the y-axis

  • Type: React.PropTypes.func
  • Default: (d) => d.y

• 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"