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
    Posts
  • #13026

    aggaton
    Member

    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.
    #13036

    Ashish
    Moderator

    Hi Aggaton,

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

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

    #13043

    Vishwas R
    Keymaster

    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.

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

You must be logged in to reply to this topic.