CODEWITHSUNDEEP
amcharts
dafie
dafie

Reputation: 1169

Value axis labels are not displayed

I have problem with my graph. For some reason value axis labels are not displayed. This is example: https://jsfiddle.net/stj7yzgd/1/.

In fact they can be displayed by adding:

"panelsSettings": {
    "marginLeft": 40,
}

or by setting display option to:

"valueAxesSettings": {
    "inside": false
}

Adding static margin seems not to be a good solution to me, because it is not working with every number. If value axis label will be a huge number, then it's label will be cropped.

Also, I dont wan't to display labels inside graph, because it is not looking well.

Is there any better solution to display that?

Upvotes: 1

Views: 558

Answers (1)

xorspark
xorspark

Reputation: 16012

You can set autoMargins to true in your panelsSettings to have it auto-size the panel; it's not documented but nearly every StockPanel-level setting can be set in panelsSettings and unfortunately it is not called out that this is turned off in the Settings object.

panelsSettings: {
  // ...
  autoMargins: true,
  // ...
}

Demo below:

var chart;

function generateChart(dataProvider) {
  chart = AmCharts.makeChart("chartdiv", {
    "type": "stock",
    "dataSets": [{
      "fieldMappings": [{
        "fromField": "visits",
        "toField": "visits"
      }],
      "categoryField": "date",
      "dataProvider": dataProvider,
    }],
    "categoryAxesSettings": {
      "alwaysGroup": true,
      "groupToPeriods": ["hh"],
    },
    "panels": [{
      "stockGraphs": [{
        "type": "column",
        "valueField": "visits",
        "periodValue": "Sum",
      }]
    }],
    "valueAxesSettings": {
      "inside": false,
      "minimum": 0,
    },
    "panelsSettings": {
      "autoMargins": true
    }
  });
}

function generateChartData() {
  var chartData = [];
  var firstDate = new Date();
  firstDate.setDate(firstDate.getDate() - 5);

  for (var i = 0; i < 15; i++) {
    var newDate = new Date(firstDate);
    newDate.setHours(newDate.getHours() + i);

    chartData.push({
      "date": newDate,
      "visits": Math.floor(Math.random() * 100) + 1
    });
  }

  return chartData;
}

generateChart(generateChartData());
#chartdiv {
  width: 100%;
  height: 500px;
}
<div id="chartdiv"> </div>

<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/amstock.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

Upvotes: 1

Related Questions