Victory-native: Setting strokeLinecap (SVG stroke-linecap) has no effect

[peacechen]

I've adapted the example theme on the docs site and it's working except for the strokeLinecap setting. The axis, grid and ticks styles are set to strokeLinecap "round" which don't seem to have any effect (though admittedly those lines are quite skinny).

I then tried to set the bar chart's strokeLineCap but it doesn't work. I modified the bar style to use stroke instead of fill:

  bar: {
    style: {
      data: {
        fill: "transparent",
        padding,
        stroke: blueGrey700,
        strokeWidth: 8,
        strokeLinecap,
        width: 8
      },
      labels: baseLabelStyles
    },
    ...baseProps
  },

I'm trying to create a horizontal bar chart that looks like this:

I can create that with a stacked horizontal bar chart, but the ends just won't round. Any ideas?

[chrisbolin]

hey @peacechen ! i think what's going on is that you'd like the bar's to behave like _lines_, (with two ends), when in reality they are _paths_ in the shape of rectangles. You can see this on the web using your browsers inspector on the VictoryBar demo:

<path d="M 46, 250
      L 46, 118
      L 54, 118
      L 54, 250
      L 46, 250
      z" role="presentation" ... ></path>

[chrisbolin]

on an SVG path the strokeLinecap won't really be noticeable, but you can change the strokeLinejoin to give it rounded corners:

                width: 0,
                strokeWidth: 20,
                stroke: 'black',
                strokeLinejoin: 'round',

Not _exactly_ where you wanted to be, but maybe closer.

[peacechen]

@chrisbolin Thanks for the suggestion. Setting width to 0 results in this error:

ExceptionsManager.js:82 JSON value '' of type NSNull cannot be converted to NSNumber

Invalid CGPath format: (
0,
0,
2,
2,
2
)

As a work-around, I set width to 1, but that along with strokeLinejoin isn't having any effect.

I'm using victory-native 0.6.0 since we're on RN 0.34 for the time being.

[chrisbolin]

Ah, bummer. I'm guessing it's an underlying react-native-svg issue. react-native-svg is pinned to react-native versions, and since you're on 0.34 that's a relatively old version of react-native-svg. I know, the react-native world moves too fast :P

[chrisbolin]

@peacechen you can try force-upgrade victory-native to the latest (0.11.1). Nothing should go up in smoke, as we don't install react-native-svg (it's a peerDependency). Then you can see if it's a victory-native or react-native-svg issue.

[peacechen]

The good news is that victory-native 0.11.1 doesn't crash when bar's width = 0. Unfortunately strokeLinejoin still has no effect, so it looks like that feature is dependent on react-native-svg. I'm hoping to update to the latest RN in the near future. There are a lot of breaking changes and it's taking a while. I'll update this thread when I can validate whether strokeLinejoin has an effect.

Speaking of RN changes, React 16.x has deprecated createClass. I noticed warnings in the console about it pointing to Victory Charts.
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass

[chrisbolin]

@peacechen thanks for the update!

oh the createClass front, I believe we've moved all of the victory-* repos away from createClass -- did that error have a line number?

[nicotroia]

I was able to achieve rounded top bars with flat bottoms, like so:

Here is my config, hopefully it will help someone

<VictoryChart
  domainPadding={21}
  theme={VictoryTheme.material}
  width={device.width+14}
  padding={{left: 42, right: 42, top: 14, bottom: 0}}
  height={200}
>
  <VictoryAxis
    offsetY={0}
    tickValues={[1, 2, 3, 4, 5, 6, 7]}
    tickFormat={['F', 'Sa', 'Su', 'M', 'Tu', 'W', 'Th']}
    style={{
      axis: {stroke: 'blue', strokeWidth: 0.5},
      tickLabels: {padding: 4}
    }}
  />
  <VictoryAxis
    dependentAxis
    tickFormat={(x) => (`${x}`)}
    style={{
      axis: {stroke: null},
      ticks: {stroke: null},
      tickLabels: {padding: 4},
    }}
  />
  <VictoryBar
    style={{
      data: {fill: 'blue', width: 4, strokeWidth: 14, stroke: 'blue', strokeLinejoin: 'round'},
    }}
    data={this.props.progressForTime}
    x='time'
    y='data'
  />
</VictoryChart>

[chrisbolin]

thanks @nicotroia! great to have examples like this

[peacechen]

@nicotroia Thanks for the example. That's not working with react-native-svg 4.3.0, so probably is only functional with the newer versions of react-native-svg.