Home forums Using CanvasJS Fixed xAxis placement Reply To: Fixed xAxis placement

#13041

aggaton
Member

Certainly, here is a link:

Illustration showing how the charts are not lined up with the xAxis

The code looks something like this: I tried padding space in front of labels to force it a fixed length, though it did not seem to do anything, apart from that I tried setting a margin for the yAxis and have an itemWidth for the legend.

` oFormProps.Chart[index] = new CanvasJS
.Chart(“chart_container” + index + “{0}”.format(oTabProps.ID),
{
axisX: {
lineColor: “black”,
gridThickness: 0,
tickThickness: 1,
margin: 5,
labelFontSize: 12,
labelFontColor: “transparent”,
},
axisY: {
lineColor: “black”,
gridThickness: 1,
tickThickness: 1,
labelFontSize: 12,
labelFontColor: “black”,
margin: 123,
labelFormatter: function(e) {
return padspace(e.value, 15);
}
},
toolTip: {
contentFormatter: function(e) {
return e.entries[0].dataPoint.indexLabel +
” : ” +
e.entries[0].dataPoint.y;
}
},
legend: {
verticalAlign: “center”,
horizontalAlign: “left”,
itemWrap: true,
itemMaxWidth: 100,
itemWidth: 100
},
data: [
{
animationEnabled: true,
bevelEnabled: true,
type: sStyle,
color: sColor,
markerSize: 2,
legendText: “Chart ” + c,
showInLegend: true,
indexLabelFontColor: “transparent”,
indexLabelFontSize: 1,
click: function(e) {
var s = new Object;
s.data1 = e.dataPoint.indexLabel;
s.data5 = e.dataPoint.data5;
PerformDrillDown(s);
},
dataPoints: oFormProps.durData
}
]
});

oFormProps.Chart[index].render();