CODEWITHSUNDEEP
javascriptreactjschart.jsreact-chartjsreact-chartjs-2
so_mc
so_mc

Reputation: 169

Chart JS - Is there a way to connect two datasets in a line chart?

I am trying to connect two data in a dataset of Chart but I can't figure out how to do so, currently my chart looks like this: Line Chart

I wanted to connect it like this: enter image description here

Here's my code:

                  <Line
                       type={'line'}
                       data={{
                       labels: [dtOne, dtTwo, dtThree, dtFour, dtFive,
                                dtSix, dtSeven, 'Today',  dtEight, dtNine, 
                                dtTen, dtEleven, dtTwelve, dtThirteen, dtFourteen],
                        datasets: [
                            {
                            label: 'Cash Net +',
                            data: 
                                [
                                22230000, 31150000, 28300000, 2640000, 27510000,
                                -9011000, 26810000, 13970000
                                ],
                            borderColor: 
                                [
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(255, 82, 82, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)'
                                ],
                            borderWidth: 2,
                            backgroundColor: 'rgba(46, 111, 255, 0)',
                            pointBackgroundColor: 'rgba(255, 255, 255, 1)',
                            pointStyle: 'circle',
                            pointRadius: 5,
                            lineTension: 0
                        },
                            {
                            label: 'Forecast +',
                            data: 
                                [
                                null, null, null, null, null,
                                null, null, null, -12820000, 22900000,
                                25710000, 9330000, -31040000, 27999000, -11190000
                                ],
                            borderColor: 
                                [
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(255, 82, 82, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(255, 82, 82, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(255, 82, 82, 1)'
                                ],
                            borderDash: [40],
                            borderDashOffset: 100,
                            borderWidth: 2,
                            backgroundColor: 'rgba(255, 82, 82, 0)',
                            pointBackgroundColor: 'rgba(255, 255, 255, 1)',
                            pointStyle: 'rect',
                            pointRadius: 5,
                            borderDash: [12],
                            lineTension: 0
                        }
                       }}
                  />

I tried to put the same value on the last null of the second dataset (from the first dataset), I was able to connect the lines but the problem is whenever I click that specific point I get 2 values (which is understandable)

enter image description here

I'm just looking for alternatives if I could perhaps connect these 2 datasets without doing that.

I've been trying to wrap my head around this for almost a week now.. and any help is appreciated.

Upvotes: 1

Views: 1053

Answers (2)

Mathilde
Mathilde

Reputation: 1

I used the following workaround (with two datasets and v.4.4.1 for chart.js):

  • Add the last value of the first dataset as the first value of the second dataset.
  • Then I had the same issue as what you described above (the value is duplicated in the tooltip), but I could remove the tooltip for the first value of the second dataset. See below the code for the second dataset (in my case, it always has only two elements).
  • It is important to set intersect to true in the options (see below) to be able to hide the tooltip.

{
label: '2nd dataset',
data: this.secondDataset,
borderColor: 'rgba(255, 99, 71, 1)',
pointBackgroundColor: 'rgba(255, 99, 71, 1)',
// Below properties are set to 0 for the first element so that the tooltip doesn't appear
pointRadius: [0, 4],
pointHitRadius: [0, 4]
}

options: {
    radius: 4,
    interaction: {
        intersect: true // Needs to be set to true to use pointRadius and pointHitRadius above
    }
}

Upvotes: 0

LeeLenalee
LeeLenalee

Reputation: 31321

You can draw the line yourself on the canvas with a custom plugin: https://www.chartjs.org/docs/latest/developers/plugins.html

You can also use the anotation plugin to draw the line for you: https://github.com/chartjs/chartjs-plugin-annotation

Upvotes: 2

Related Questions