Home forums Using CanvasJS Fixed xAxis placement

This topic contains 5 replies, has 3 voices, and was last updated by  aggaton 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 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 11 months, 1 week ago by  aggaton.
    #13036

    Ashish
    Participant

    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.

    #13823

    Vishwas R
    Keymaster

    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

    #13848

    aggaton
    Member

    Thank you, just what I needed…

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

You must be logged in to reply to this topic.