You will find that any event which causes the chart to re-render, such as hover tooltips, etc., will cause the first dataset to be copied over to other datasets, causing your lines and bars to merge together.
This is because to track changes in the dataset series, the library needs a key to be specified. If none is found, it can't tell the difference between the datasets while updating. To get around this issue, you can take these two approaches:
import { Line } from 'react-chartjs-2';
<Line
datasetIdKey='id'
data={{
labels: ['Jun', 'Jul', 'Aug'],
datasets: [
{
id: 1,
label: '',
data: [5, 6, 7],
},
{
id: 2,
label: '',
data: [3, 2, 1],
},
],
}}
/>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4