Fixed xAxis placement

[aggaton]

I need to be able to placed several charts underneath each other, that has the same xAxis data spread however with different yAxis. The charts will have legends to the left and labels to the left of the yAxis. I tried setting the margin on the yAxis, however it seems like the placement is also based on the width of the legend and labels. I can fix the with of the legend, but not the fixed width of the label, so if the charts have different label widths they don’t line up.

• This topic was modified 7 years, 6 months ago by aggaton.

[Ashish]

Hi Aggaton,

Please provide a jsfiddle or pictorial representation of your requirement so that we can understand your problem better and help you accordingly.

[aggaton]

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();

[Vishwas R]

Aggaton,

Sorry, this feature is not available as of now. But in coming days, we will be exposing chart properties using which you can solve this issue.

[Vishwas R]

Aggaton,

We have released v1.9.6 Beta with Methods & Properties, which allows you to programmatically export chart as image, print chart, access internally calculated values, etc. Please refer to the release blog for more information.

Please check this jsFiddle.

—
Vishwas R
Team CanvasJS

[aggaton]

Thank you, just what I needed…