border around a chart

How to draw a border around a chart?

According to https://github.com/rrag/react-stockcharts/issues/310, I should change border with

.react-stockcharts-grabbing-cursor,
.react-stockcharts-crosshair-cursor

However, looking into html, a chart is created with “g” without a css class attached. I want to have a border-bottom at the end of each chart. So actually, I can use <XAxis axisAt="bottom" orient="bottom" showTicks="false"/> to simulate a border at the bottom of a chart.

I want to use something simpler:

border-bottom: 1px solid black;

How can I do this?

The “Chart” has no property such as “borderStyle”.

[cbrwizard]

Ended up creating a custom component for that purpose:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  hexToRGBA,
  strokeDashTypes,
  getStrokeDasharray,
} from 'react-stockcharts/lib/utils'
import GenericChartComponent from 'react-stockcharts/lib/GenericChartComponent'
import { getAxisCanvas } from 'react-stockcharts/lib/GenericComponent'

class ChartHorizontalLine extends Component {
  constructor(props) {
    super(props)
    this.renderSVG = this.renderSVG.bind(this)
    this.drawOnCanvas = this.drawOnCanvas.bind(this)
  }

  drawOnCanvas(ctx) {
    const {
      stroke,
      strokeWidth,
      opacity,
      strokeDasharray,
      width,
      y,
      x,
    } = this.props
    ctx.beginPath()

    ctx.strokeStyle = hexToRGBA(stroke, opacity)
    ctx.lineWidth = strokeWidth

    const y1 = y
    const y2 = y
    const x1 = x
    const x2 = x + width

    ctx.setLineDash(getStrokeDasharray(strokeDasharray).split(','))
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()
  }

  renderSVG() {
    const {
      width,
      className,
      x,
      y,
      stroke,
      strokeWidth,
      opacity,
      strokeDasharray,
    } = this.props

    return (
      <line
        className={className}
        strokeDasharray={getStrokeDasharray(strokeDasharray)}
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeOpacity={opacity}
        y1={y}
        y2={y}
        x1={x}
        x2={x + width}
      />
    )
  }

  render() {
    const { clip } = this.props

    return (
      <GenericChartComponent
        svgDraw={this.renderSVG}
        clip={clip}
        canvasDraw={this.drawOnCanvas}
        canvasToDraw={getAxisCanvas}
        drawOn={['pan']}
      />
    )
  }
}

ChartHorizontalLine.propTypes = {
  className: PropTypes.string,
  /* eslint-disable react/boolean-prop-naming */
  clip: PropTypes.bool,
  stroke: PropTypes.string,
  strokeWidth: PropTypes.number,
  strokeDasharray: PropTypes.oneOf(strokeDashTypes),
  opacity: PropTypes.number,
  y: PropTypes.number.isRequired,
  x: PropTypes.number.isRequired,
  width: PropTypes.number.isRequired,
}

ChartHorizontalLine.defaultProps = {
  className: 'line ',
  clip: true,
  stroke: '#000000',
  opacity: 0.5,
  strokeWidth: 1,
  strokeDasharray: 'Solid',
}

export default ChartHorizontalLine

@rrag do you want me to open a pr with this? I can name it HorizontalLine.

[cbrwizard]

Turned out it’s fixable by passing clip={false} to GenericChartComponent rendered in StraightLine. Opened a pr for it https://github.com/rrag/react-stockcharts/pull/538