amcharts / amcharts3-react

Official amCharts V3 React component
Apache License 2.0
118 stars 50 forks source link

valueAxes is not working for X axis #85

Open Khaledneo opened 5 years ago

Khaledneo commented 5 years ago

Hello,

I'm using the following Amchart config:

{
  "type": "serial",
  "theme": "light",
  "autoMarginOffset": 20,
  "graphs": [{
    "id": "g1",
    "balloonText": "[[value]]",
    "bullet": "diamond",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "hideBulletsCount": 50,
    "title": "red line",
    "valueField": "ay",
    "lineAlpha": 0.8,
    "lineThickness": 2,
    "lineColor": "#b0de09",
    "fillAlphas": 0,
    "useLineColorForBulletBorder": true
  }, {
    "id": "g2",
    "balloonText": "[[value]]",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "hideBulletsCount": 50,
    "title": "red line",
    "valueField": "by",
    "lineAlpha": 0.8,
    "lineThickness": 2,
    "lineColor": "#fcd202",
    "fillAlphas": 0,
    "useLineColorForBulletBorder": true
  }],
  "chartCursor": {
    "limitToGraph": "g1"
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "axisColor": "#DADADA",
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "valueAxes": [{
    "axisAlpha": 0,
     title: "Y",
    "position": "right",
  },{
    "axisAlpha": 1,
    "title": "X",
    "position": "bottom",
  }],
}

valueAxes object is applied only for Y axis by adding the title and changed the opacity.

Why is not applied for the X axis one?

Thanks.

xorspark commented 5 years ago

Serial charts can only have one horizontal/X axis (or Y if rotate: true is set), and that axis must be a category axis, which isn't fully numeric. You can set the second value axis as a second Y axis (position: "left" or position: "right"), but you also need to specify IDs and assign your graphs to them, e.g.

graphs: [{
  // ...
  "valueAxis": "v1, //use right hand axis
}, {
  // ...
  valueAxis: "v2" //use left hand axis
}],
// ...
valueAxes: [{
  "position": "right",
  "id": "v1",
  // ...
}, {
  "position": "left",
  "id": "v2"
}]

If you need both a numeric X and Y axis, consider using an XY chart instead.