Marker

Marker

This documentation is valid for the unmerged branch Data Point Symbols only. Most of the features described here are not available in the master branch yet.

Overview

Markers are used by LineChart and ScatterChart to visualize data points. Currently, there are three kind of markers available:

• Circle (React component VoronoiCircle)
• Rectangle (React component VoronoiRect)
• Star (React component VoronoiStar)

The hierarchy of one data point in a chart is the following (a parent might have multiple children): Chart -> DataSeries -> VoronoiContainer -> Marker (i.e. VoronoiCircle, VoronoiRect or VoronoiStar) -> VoronoiArea and marker (e.g. SVG circle). Currently, DataSeries is different for LineChart and ScatterChart but all components below/in DataSeries are common components shared by both chart types.

Props to set

The kind of maker used can be specified for each data point separately. Some other properties of the marker can be set per series and some per chart. Because of that, some properties are set in the data JSON of a series (see example below). The following properties are explained for the case of the first series of data (data[0]):

• data[0].markerName - Kind of marker to use. If the length of the provided array is smaller than the number of data points of the series, the last provided markerName is used for the rest of all markers (e.g. markerName = "circle" leads to using the circle marker for the first and all other data points).
  • React.PropTypes.string or React.PropTypes.array
  • default: "circle"
  • can be set per data point
• data[0].markerWidth - Width of marker.
  • Used by VoronoiRect
  • React.PropTypes.number
  • default: 6
  • can be set per data series
• data[0].markerHeight - Height of marker.
  • Used by VoronoiRect
  • React.PropTypes.number
  • default: 6
  • can be set per data series
• data[0].markerRadius - Radius of marker.
  • Used by VoronoiCircle
  • React.PropTypes.number
  • default: 3
  • can be set per data series
• data[0].markerOuterRadius - Outer radius of marker. See https://dillieodigital.wordpress.com/2013/01/16/quick-tip-how-to-draw-a-star-with-svg-and-javascript/ for calculation of star form.
  • Used by VoronoiStar
  • React.PropTypes.number
  • default: 6
  • can be set per data series
• data[0].markerInnerRadius - Inner radius of marker. See https://dillieodigital.wordpress.com/2013/01/16/quick-tip-how-to-draw-a-star-with-svg-and-javascript/ for calculation of star form.
  • Used by VoronoiStar
  • React.PropTypes.number
  • default: 3
  • can be set per data series
• data[0].markerAnimationResize - Factor by with the size of the marker (e.g. markerRadius) is resized when the marker is animated.
  • Used by all markers
  • React.PropTypes.number
  • default: 1.25
  • can be set per data series
• data[0].markerAnimationShade - Percentage of color shading of animated marker (I assume valid values are >= 0 and <= 1 but I haven't tested it)
  • Used by all markers
  • React.PropTypes.number
  • default: 0.2
  • can be set per data series
• hoverAnimation - If true, the markers are animated on mouse over, click and touch. If props.markerOnClick is defined, the markers are animated anyway.
  • Used by all markers
  • React.PropTypes.boolean
  • default: true
  • can be set per chart
• markerOnClick - A callback to which the x and y value of a clicked marker are passed as argument.
  • Used by all markers
  • React.PropTypes.func
  • default: undefined
  • can be set per chart
  • Example for such a callback:

// set x and y value of clicked marker to state
setSelectedValue: function(point) {
    if (point) {
      var state = this.state;
      state.selectedX = point.x;
      state.selectedY = point.y;
      this.setState(state)
    }

Example to plot a line chart with callback to display the values of the clicked marker

// in render()

<LineChart
  legend={true}
  data={lineData}
  width='100%'
  height={400}
  viewBoxObject={{
    x: 0,
    y: 0,
    width: 500,
    height: 400
  }}
  markerOnClick={this.setSelectedValue}
/>
{this.renderSelectedValue()}

// somewhere in the same react class

setSelectedValue: function(point) {
  if (point) {
    var state = this.state;
    state.selectedX = point.x;
    state.selectedY = point.y;
    this.setState(state)
  }
},

renderSelectedValue: function() {
    var selectedValues = <div style={{margin: '30px'}}>Select a value!</div>;
    if (this.state.selectedX != null && this.state.selectedY != null) {
        selectedValues = <div style={{margin: '30px'}}>
          {'You selected X = ' + this.state.selectedX + ' and Y = ' + this.state.selectedY}
          </div>
    }
    return selectedValues
}