Updates request: scatter design by data && stroke style (dashed, dotted, etc)

[St1ma]

First of all, thanks a lot for this charming lightweight library (I've finally was able to replace highcharts monster)!

Few properties I can't find how to make custom:

1. Scatter bullet - is it possible to change their color, size, or whatever by the value of dot is actually rendering now? (I assume, theme property set as a function could do a trick)
2. Would be great (not urgent) to have the ability to switch between different lines (axis) viewes, like dashed, dotted. Does it sounds good to be added to your work list?

Thank you in advance!

[xanderdeseyn]

Hi @St1ma, using a function for theming the scatter would be a first for this lib, I'll have to think about how to implement this and communicate it clearly in the docs. Also might look at other places where this makes sense.

2. Should not be too difficult if react-native-svg works correctly, I'll add it to the list.

[xanderdeseyn]

You can now pass dashArray to the Line theme to create dashed lines.

I'll try to get the other feature in somewhere this week

[St1ma]

@N1ghtly Thanks a lot!

[St1ma]

@N1ghtly Sorry, if I've missed something, but can I add dashArray property to grid>stroke section of VerticalAxis or HorizontalAxis components?

[xanderdeseyn]

Ohhh I see now, I thought you were talking about the Line component. I'll add it for grid and the axis as well.

[St1ma]

@N1ghtly Thanks anyway) Also, I've faced a crash on the initial rendering of my Line chart after updating to 5.6.0 version

The Chart component code:

<Chart
      style={{ height: 300, width: '90%', alignSelf: 'center' }}
      yDomain={{ min: yAxisMin - step, max: yAxisMax + step }}
      xDomain={{ min: 1, max: dots.length }}
      padding={{
        left: 40, top: 30, bottom: 30, right: 16,
      }}
    >
      <VerticalAxis
        tickCount={5}
        theme={{
          labels: { formatter: (v) => v.toFixed(1), label: { dx: -14, color: colors.primary } },
          axis: { visible: false },
          ticks: { visible: false },
          grid: { stroke: { color: colors.line } },
        }}
      />
      <Line
        data={data1}
        theme={{
          stroke: { color: colors.primary, width: 2 },
          scatter: {
            default: {
              width: 12, height: 12, rx: 6, color: '#44ad32',
            },
          },
        }}
        smoothing="cubic-spline"
      />
      {(limits || []).map((limit) => (
        <Line
          data={data1.map((item) => ({ ...item, y: limit.value }))}
          smoothing="none"
          theme={{ stroke: { color: limit.color, width: 1 } }}
        />
      ))}
    </Chart>

Any suggestions?

[xanderdeseyn]

Hmm, can you confirm that xDomain and yDomain are not something like [1,1] (would overflow)

[xanderdeseyn]

dashArray is added to the Axis components as well (you can check docs)

[xanderdeseyn]

That's crazy, barely anything changed. I can't reproduce it either, would it be possible to provide a minimal demo? (You can just alter the demo project in the repo)

[St1ma]

@N1ghtly No worries, seems like our backend was just updated and instead of numeric data they send some status strings... Sorry for that mess

[xanderdeseyn]

Aha okay!

[aaronpropst]

I second the need for this:

Scatter bullet - is it possible to change their color, size, or whatever by the value of dot is actually rendering now? (I assume, theme property set as a function could do a trick)

I need to be able to provide svg shapes of my own for inclusion on each point (based on data) I could potentially submit a PR for this. Let me know if you have any direction that may ensure acceptance.

[davidbwaters]

Any update on customizing the scatter dot/bullet?

[IKTANIM]

Is there any way to show or hide scatter points based on the meta data?? Can I add logic to Scatter point?? @xanderdeseyn