Mix chart type support about react-chartjs-2 HOT 4 CLOSED

👍 thanks a bunch!

from react-chartjs-2.

Hey @zeroasterisk ,

Apologies for late reply.
Just added an example to https://github.com/gor181/react-chartjs-2/blob/master/example/src/components/mix.js

Cheers.

from react-chartjs-2.

cuddos to http://plnkr.co/edit/TvY5tz?p=preview for a example.

from react-chartjs-2.

Hey guys,
I need to create a dot inside a Line Chart. I started by mixing the line chart with the bubble chart. The thing is that the data array passed to the bubble configuration needs to have the same length as the line chart configuration otherwise the bubble doesn't move in the x-axis.

In resume:

With the next configuration it created bubbles along the x axis with y=0 with the one with value 57 as the only bubble i want to show

var data = {
labels: [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,'um ano',1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,'2 anos'],
datasets: [{
type: 'line',
label: 'My First dataset',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [20,25,30,37,47,59,71,85,93,97,101,105,104,103,102,101,101,102,102,102,103,103,103,103,103]
},
{
type:'bubble',
label:'calculado',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,57,0,0,0,0,0,0,0,0,0]
}
]
};

With the next configuration it created one bubble with the y value right and x value 0 (wrong):

var data = {
labels: [0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,'um ano',1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,'2 anos'],
datasets: [{
type: 'line',
label: 'My First dataset',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [20,25,30,37,47,59,71,85,93,97,101,105,104,103,102,101,101,102,102,102,103,103,103,103,103]
},
{
type:'bubble',
label:'calculado',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [{ x: 10, y: 20, r: 5 }]
}
]
};

The render:

var LineChart = require('react-chartjs-2').Line;

LineChart ref='chart' data={data} options={options}

Thank you in advance

from react-chartjs-2.