Recharts ComposedChart with multiple datasets?

Question

I want to plot data points on a composed chart, consisting of Bars and Lines, each having their own datasets, respectively.

For instance, I want each Bar to get a value from data.points, but Lines to get their value from an array of objects, data.content.

There's a difference in the two datasets, though they're both time series.

Example of data shape:

const data = {
    points: [{
        value: 80,
        timestamp: 2010-01-09
    }],
    content: [{
        date_posted: 2010-01-10,
        content_id: 'xewr23r3g29w0'   
    }]
}

Would I be able to use these datasets separately per chart component or do I have to loop through the data and normalize it all somehow?

Also for reference is my code for the instance of ComposedChart.

<ComposedChart width={600} height={400} data={data} margin={margin} legendType="circle">
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="timestamp" tickFormatter={this.formatDate} height={40} />
  <YAxis />
  <Legend iconType="circle" />
  <Bar dataKey="content_id" barSize={20} fill="#413ea0" />
  <Line name="Selected Period" type="monotone" dataKey="value" stroke={colors.blue} />
</ComposedChart>

Answer 1

You should be able to add the data attribute to Bar & Line separately:

<Bar data={data.content} ... />
<Line data={data.points} ... />

I had the issue while trying to combine 2 datasets for Area & Line, where Area does not accept the data attribute. I solved it like this:

<ResponsiveContainer width="100%" height={300}>
  <ComposedChart
    data={myAreaData}
    ...
  >
    <XAxis ... />
    <YAxis ... />
    <Legend layout="vertical" align="right" verticalAlign="middle" />
    <Area
      // does not accept 'data' attribute (!)
      ...
    />
    <Line data={myLineData} ... />
  </ComposedChart>
</ResponsiveContainer>