 Q = require 'q'
 React = require('react')
 Components = require('./components')
+
+# jump through some hoops to add clip-path since SVGDOMPropertyConfig is useless
+MUST_USE_ATTRIBUTE = require('react/lib/DOMProperty').MUST_USE_ATTRIBUTE
+require('react/lib/ReactInjection').DOMProperty.injectDOMPropertyConfig
+  Properties: clipPath: MUST_USE_ATTRIBUTE
+  DOMAttributeNames: clipPath: 'clip-path'
+
 
 clearExtent = (v) -> _.extend {}, v, {extent: null}
 setBrushing = (v) -> _.extend {}, v, {brushing: true}

    <path stroke={d.color}
          style={style}
          fill={if d.lineMode is 'area' then d.color}
          d={d.lineFn(d.lineValues)}/>


ScatterComponent = React.createClass

      unless params.hideLegend
        legend = <LegendComponent targets={targets} mouseHandler={@}/>

      # react doesn't support clipPath :(
      clipper = """
      <clipPath id="clipper">
          <rect width="#{sizes.width}" height="#{sizes.height}"/>
      </clipPath>"""

      svg =
        <svg width={sizes.svgWidth} height={sizes.svgHeight}
          ref='svg'
          style={{'font-family': '"Helvetica Neue"', cursor: 'default', 'background-color': params.bgcolor}}
          onMouseMove={@onMouseMove}>
          {title}
          <g dangerouslySetInnerHTML={__html: clipper}/>

          <g transform={"translate(#{sizes.margin.left},#{sizes.margin.top})"} ref="chartArea">
            {xAxis}
            {yAxis}
