Dirty-flow
Dirty-flow

Reputation: 2300

How to display only ForceShow-ticks on the x-Axis?

I have a serial amChart and on the CathegoryAxis I have year-values (from 2001 to 2016) and I want to display only some of them. With forceShowField I can show them, but the default ticks are still there. Is there a way to display the forceSHowFields only or to give a list with all ticks?

var chart = AmCharts.makeChart("resultchart", {
      "type": "serial",
      "theme": "light",
      "marginRight": 40,
      "marginLeft": 40,
      "autoMarginOffset": 20,
      "mouseWheelZoomEnabled": false,
      "period":'YYYY',
      "dataDateFormat": "YYYY",
      "categoryField": "date",
      "categoryAxis": {
          "parseDates": false,
          "dashLength": 1,
          "forceShowField":"forceShow",
          "startOnAxis": true
      },
      "numberFormatter": {
          "precision": 0,
          "decimalSeparator": ",",
          "thousandsSeparator": "."
      },
      "export": {
          "enabled": true,
          "menu":[]
      }
})
<div id="resultchart"></div>

Upvotes: 0

Views: 360

Answers (1)

xorspark
xorspark

Reputation: 16012

The only way to show specific ticks is to disable the axis-generated labels and ticks and create your own using guides:

  "categoryAxis": {
    // ...
    //disable labels/ticks generated by axes
    "labelsEnabled": false,
    "tickLength": 0,
    //use guides to create your own
    "guides": [{
      "category": "2004",
      "label": "2004",
      "tickLength": 5
    }, {
      "category": "2008",
      "label": "2008",
      "tickLength": 5
    }, 

var chart = AmCharts.makeChart("resultchart", {
  "type": "serial",
  "theme": "light",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "mouseWheelZoomEnabled": false,
  "graphs": [{
    "valueField": "value",
    "type": "column",
    "fillAlphas": .8
  }],
  "categoryField": "date",
  "categoryAxis": {
    "dashLength": 1,
    "startOnAxis": true,
    //disable labels/ticks generated by axes
    "labelsEnabled": false,
    "tickLength": 0,
    //use guides to create your own
    "guides": [{
      "category": "2004",
      "label": "2004",
      "tickLength": 5
    }, {
      "category": "2008",
      "label": "2008",
      "tickLength": 5
    }, {
      "category": "2012",
      "label": "2012",
      "tickLength": 5
    }, {
      "category": "2016",
      "label": "2016",
      "tickLength": 5
    }]
  },
  "numberFormatter": {
    "precision": 0,
    "decimalSeparator": ",",
    "thousandsSeparator": "."
  },
  "export": {
    "enabled": true,
    "menu": []
  },
  "dataProvider": [{
      "date": 2001,
      "value": 16
    },
    {
      "date": 2002,
      "value": 10
    },
    {
      "date": 2003,
      "value": 12
    },
    {
      "date": 2004,
      "value": 15
    },
    {
      "date": 2005,
      "value": 18
    },
    {
      "date": 2006,
      "value": 10
    },
    {
      "date": 2007,
      "value": 17
    },
    {
      "date": 2008,
      "value": 19
    },
    {
      "date": 2009,
      "value": 18
    },
    {
      "date": 2010,
      "value": 10
    },
    {
      "date": 2011,
      "value": 13
    },
    {
      "date": 2012,
      "value": 17
    }
  ]

})
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>

<div id="resultchart" style="width: 100%; height: 300px;"></div>

Upvotes: 1

Related Questions