Home forums Using CanvasJS How can I horizontally align two separate charts

This topic contains 2 replies, has 2 voices, and was last updated by  paultaylor 8 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #20066

    paultaylor
    Member

    So I have two barcharts on one page one under the other. Because the labels are different this means that for the chart with the longer text the actual graph starts further to the right, I would like both charts to be horizontally aligned along the axis.

    I’m already using labelMaxWidth, I guess I could solve this by setting a labelMinWidth but this doesn;t seem to exist ?

    #20072

    Vishwas R
    Keymaster

    @paultaylor,

    Do you mean aligning axisX of multiple bar charts? If so, you can achieve that by setting axis margin. Please take a look at this jsfiddle.

    If this doesn’t fulfill your requirement, kindly create a jsfiddle or share pictorial representation of your requirement so that we can understand it better and help you out.


    Vishwas R
    Team CanvasJS

    #20081

    paultaylor
    Member

    Hi, you have understood my requirement correctly

    The slight difficulty for me is in your solution one chart has to be aware of the other. Whereas in my javascript (which is constructed programatically with Java) each chart is called chart and is within its own function so they are not visible outside of the function. I can rewrite my code if I have to but it would be better if I could set a margin value in each chart independently and that would ensure they were lined up correctly

    Is that possible ?

    <script type="text/javascript">
    function summaryChart() {
    var xLabelMap = {
      "0": "Loaded",
      "1": "MusicBrainz",
      "2": "Discogs",
      "3": "Artwork",
      "4": "Saved",
      "5": "Completed"
    };
    var chart = new CanvasJS.Chart("summary",{
      "title": {
        "text": "",
        "verticalAlign": "bottom",
        "horizontalAlign": "center"
      },
      "axisX": {
        "reversed": true,
        "labelMaxWidth": 250,
        "labelWrap": true,
        "interval": 1,
        "labelFontSize": 15,
        "labelFormatter": function(e) {return xLabelMap[e.value] || e.value;}
      },
      "axisY": {
        "reversed": false,
        "labelMaxWidth": 250,
        "labelWrap": true,
        "title": "% of Loaded Songs",
        "viewportMinimum": 0,
        "viewportMaximum": 12,
        "interval": 1,
        "titleFontSize": 15,
        "labelFontSize": 15,
        "labelFormatter": function(e) { return Math.round((e.value / 12) * 100) + "%"}
      },
      "data": [
        {
          "type": "stackedBar",
          "color": "#a2c2e6",
          "showInLegend": false,
          "dataPoints": [
            {
              "x": 0,
              "y": 12,
              "label": "Loaded"
            },
            {
              "x": 1,
              "y": 12,
              "label": "MusicBrainz"
            },
            {
              "x": 2,
              "y": 12,
              "label": "Discogs"
            },
            {
              "x": 3,
              "y": 12,
              "label": "Artwork"
            },
            {
              "x": 4,
              "y": 0,
              "label": "Saved"
            },
            {
              "x": 5,
              "y": 12,
              "label": "Completed"
            }
          ]
        }
      ]
    });
    chart.render();}
    function completenessChart() {
    var xLabelMap = {
      "0": "Acoustic",
      "1": "Album"
    };
    var chart = new CanvasJS.Chart("completeness",{
      "title": {
        "text": "",
        "verticalAlign": "bottom",
        "horizontalAlign": "center"
      },
      "axisX": {
        "reversed": true,
        "labelMaxWidth": 250,
        "labelWrap": false,
        "interval": 1,
        "labelFontSize": 15,
        "labelFormatter": function(e) {return xLabelMap[e.value] || e.value;}
      },
      "axisY": {
        "reversed": false,
        "labelMaxWidth": 250,
        "labelWrap": false,
        "title": "% of Loaded Songs",
        "viewportMinimum": 0,
        "viewportMaximum": 12,
        "interval": 1,
        "titleFontSize": 15,
        "labelFontSize": 15,
        "labelFormatter": function(e) { return Math.round((e.value / 12) * 100) + "%"}
      },
      "data": [
        {
          "type": "bar",
          "color": "#a2c2e6",
          "showInLegend": false,
          "dataPoints": [
            {
              "x": 0,
              "y": 12,
              "label": "Acoustic"
            },
            {
              "x": 1,
              "y": 12,
              "label": "Album"
            }
          ]
        }
      ]
    });
    chart.render();}
    window.addEventListener("load", summaryChart, false);window.addEventListener("load", completenessChart, false);</script><script src="../style/canvasjs.min.js">
    </script>
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.