Home forums Using CanvasJS Fixed xAxis placement

This topic contains 3 replies, has 3 voices, and was last updated by  Vishwas R 1 month, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #13026


    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 1 month, 2 weeks ago by  aggaton.


    Hi Aggaton,

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



    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 +
    ” : ” +
    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;
    dataPoints: oFormProps.durData



    Vishwas R


    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.