When the columns of a multi-series chart with discrete x axis values are added, they appear to centre around a notional X value, but the columns themselves have their own centre line which varies according to how many series there are.
When error bars are added, they naturally centre on the column’s centre lines.
However when trying to indicate outliers or to plot the actual values themselves (there is a trend opposing the increasing use of histograms in science communications and instead plotting ‘raw’ data – ‘R’ for example is able to do this), these points always sit on the notional X value grid, not on the centre of the multi-series column like the error bars do.
I have included sample code below.
I also note that box and whisker plots are not able to operate as multi-series in the same way as column charts do.
My question is:
Is there a way to get the scatter points to follow the centre line of columns? Or is there a need for a new type, say errorDots, which might accept a dataPoint argument like {y: [1,2,3,4,5]} to represent 5 points vertically above one another on the centre line of a column? If so, is there a need to expand this to allow highlighting of one or more points, such as {y: [1,2,{3, markerColor:red},4,5]}?
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Early and late expression for cells, Class 1 to 4"
},
axisY:{
title: "Relative expression rate"
},
toolTip: {
shared: true
},
data: [
{
type: "column",
name: "Early",
toolTipContent: "{label} <br> <b>{name}:</b>",
dataPoints: [
{ y: 14, label: "Class 1" },
{ y: 16, label: "Class 2" },
{ y: 12, label: "Class 3" },
{ y: 35, label: "Class 4" }
]
},{
type: "error",
name: "Standard Error",
whiskerLength:10,
whiskerColor: "#000000",
stemColor: "#000000",
dataPoints: [
{ y: [13, 16], label:"Class 1" },
{ y: [14, 17], label:"Class 2" },
{ y: [9, 13], label:"Class 3" },
{ y: [30, 36], label:"Class 4" }
]
},{
type: "scatter",
name: "Early",
markerColor: "#000000",
dataPoints: [
{ y: 14},
{ y: 16},
{ y: 9},
{ y: 25}
]
},{
type: "column",
name: "Late",
dataPoints: [
{ y: 10, label: "Class 1" },
{ y: 13, label: "Class 2" },
{ y: 11, label: "Class 3" },
{ y: 30, label: "Class 4" }
]
},{
type: "error",
name: "Standard Error",
whiskerLength:10,
whiskerColor: "#000000",
stemColor: "#000000",
dataPoints: [
{ y: [1, 12], label:"Class 1" },
{ y: [6, 16], label:"Class 2" },
{ y: [9, 15], label:"Class 3" },
{ y: [12, 40], label:"Class 4" }
]
},{
type: "scatter",
name: "Late",
markerColor: "#000000",
dataPoints: [
{ y: 3},
{ y: 25},
{ y: 4},
{ y: 22}
]
}]
});
chart.render();
}
.
