Add Points to VictoryLine Chart by Combining with Scatter Plot 🥳

When using VictoryCharts, it doesn’t seem to be possible to add points to the line chart — however we can add a scatter plot, VictoryScatter, beside VictoryLine, and simply pass in the same data! That will give us the points we desire.

Below is an example of code for the line chart with and without the scatter:

Code for just the line graph:

<VictoryChart
  theme={VictoryTheme.material}
  scale={{y:'time'}}
  domainPadding={{ x: 20, y: 20 }}
>
  {/* ONLY VICTORY LINE */}
  <VictoryLine
    data={data}
  />
</VictoryChart>

Only line graph:

Code for scatter and line graphs together:

<VictoryChart
  theme={VictoryTheme.material}
  scale={{y:'time'}}
  domainPadding={{ x: 20, y: 20 }}
>
  {/* ADD VICTORY SCATTER */}
  <VictoryLine
    data={data}
  />
  <VictoryScatter
    style={{ data: { fill: "#c43a31" } }}
    size={7}
    data={data}
  />
</VictoryChart>

Scatter and line graph:

I Googled around this several times, and it took me a while to think of this idea on my own, so I thought it would be useful to add this short post to the potential search engine results.

Boats in Archapelago by Karl Paul Baldacchino on Unsplash

Girl in Hammock by Ida Marie Dyrøy on Unsplash