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

[paultaylor]

Maybe, but in the example they just show at the end of the bar, I would want the on the bar as my mockup shows

[paultaylor]

okay, thanks I get the difference but Im not clear do you use JSON inside the data part or is it all just Javascript ?

[paultaylor]

Thanks, I sort of worked this out but I am finding it a bit difficult to differentiate between json and javascript data.
I assume in the jsfiddle the data: [] part is json and the rest javascript ?
In the examples on https://canvasjs.com/docs/charts/chart-options/axisy/label-formatter/ are you doing it incorrectly then, or is that all pure javascript rather than json ?

[paultaylor]

Actually I was trying to implement it more like done on this page https://canvasjs.com/docs/charts/chart-options/axisy/label-formatter/ but having an issue since label-formatter is not in double quotes. Is it valid json for the value of label-fomatter to not be double quotes, or is this output not json.

[paultaylor]

Thankyou that is what i required.