How can I horizontally align two separate charts

[paultaylor]

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 ?

[Vishwas R]

@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

[paultaylor]

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>