Mix chart type support

[zeroasterisk]

Could you make an example on how we can support the new mix chart type, with some data sets on line and some on bar, with disparate Y axis values?

[gor181]

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.

[gor181]

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

[zeroasterisk]

👍 thanks a bunch!

[RuiSa]

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