Reply To: How can I horizontally align two separate charts

[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>