amcharts setting value axis grid in hours & mins (hh:mm), stopping it to get converted to days

Question

I am using amcharts, in value axis I have configured duration in form of hh:mm and I need the grid to be shown with the same format (i.e. hours & minutes only).

I am using something like this :

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "startDuration": 1,   
  "valueAxes": [{
    "id": "v1",
    "title": "Cost (in USD)",
    "position": "left",
    "autoGridCount": false,
    "labelFunction": function(value) {
      return "$" + Math.round(value);
    }
  }, {
    "id": "v2",
    "title": "Effort ( hh:mm )",
    "gridAlpha": 0,
    "position": "right",
    "autoGridCount": false,
    "duration": "mm",
    "durationUnits": {
      "hh": "h ",
      "mm": "min"
     }
  }],

Here is my fiddle

It's working fine as long as the values are under 23:59 (i.e. 23:59 hrs), But it starts converting to days if the values goes beyond this, for example 25:07 hrs - displays as "1 day,1hr,7min". While, I need to keep it displaying in hh:mm format only (i.e. 25hrs,7mins).

For larger values also, I don't have any issue showing it something like as (386521 hrs, 37 mins). Any suggestions to avoid/restrict day conversion would be highly appreciated!

Answer 1

You have to use a labelFunction instead of durationUnits in this case as there isn't a way to restrict durationUnits directly to stop at a specific unit:

  "valueAxes": [
    // ...first one omitted
  {
    // ...
    "labelFunction": function(value) {
      var minutes = (value % 60).toFixed(0);
      var hours =  Math.floor(value / 60);
      return hours + 'h ' + minutes + ' min';
    }
  }]

Demo:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "startDuration": 1,
  "valueAxes": [{
    "id": "v1",
    "title": "Cost (in USD)",
    "position": "left",
    "autoGridCount": false,
    "labelFunction": function(value) {
      return "$" + Math.round(value);
    }
  }, {
    "id": "v2",
    "title": "Effort ( hh:mm )",
    "gridAlpha": 0,
    "position": "right",
    "autoGridCount": false,
    "labelFunction": function(value) {
      var minutes = (value % 60).toFixed(0);
      var hours = Math.floor(value / 60);
      return hours + 'h ' + minutes + ' min';
    }
  }],
  "graphs": [{
    "id": "g4",
    "valueAxis": "v1",
    "lineColor": "#3B7610",
    "fillColors": "#3B7610",
    "fillAlphas": 1,
    "type": "column",
    "title": "Cost saving per year",
    "valueField": "costSaving",
    "clustered": false,
    "columnWidth": 0.3,
    "topRadius": 0.95,
    // "legendValueText": "$[[value]]M",
    "balloonText": "[[title]]<br /><b style='font-size: 90%'>$[[value]]M</b>"
  }, {
    "id": "g1",
    "valueAxis": "v2",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "lineColor": "#20acd4",
    "type": "smoothedLine",
    "title": "Effort saving per year",
    "topRadius": 0.95,
    "useLineColorForBulletBorder": true,
    "valueField": "effortSaving",
    "balloonText": "[[title]]<br /><b style='font-size: 90%'>[[value]]</b>"
  }],
  "chartCursor": {
    "pan": true,
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "valueLineAlpha": 0.2
  },
  "categoryField": "lob",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0.9,
    "axisThickness": 1,
    "axisColor": "black",
    "gridAlpha": 0,
    "labelRotation": 25,
    "fontSize": 10,
    "boldLabels": true

  },
  "legend": {
    "horizontalGap": 5,
    "maxColumns": 30,
    "useGraphSettings": true,
    "markerSize": 10,
    "leftMargin": 0,
    "valueText": ""
  },
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "export": {
    "enabled": true
  },
  "dataProvider": [{
    "lob": "abca",
    "effortSaving": 64140,
    "costSaving": 3600
  }, {
    "lob": "dfasdf",
    "effortSaving": 326724,
    "costSaving": 1875
  }, {
    "lob": "dfgsdfgt",
    "effortSaving": 36864,
    "costSaving": 1500,
  }, {
    "lob": "gfsdg",
    "effortSaving": 101808,
    "costSaving": 3614,
  }, {
    "lob": "fgfgf",
    "effortSaving": 13200,
    "costSaving": 6215,
  }, {
    "lob": "jytujty",
    "effortSaving": 111312,
    "costSaving": 3123,
  }, {
    "lob": "erqwr",
    "effortSaving": 5040,
    "costSaving": 1235,
  }]
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>