zawarudo
zawarudo

Reputation: 2496

Decimals on yAxis are not being displayed, even if that same code works on highcharts jsfiddle

I am having some issues I am really running out of ideas, my root of problem is this is what am I sending to highcharts, the json is unchanged and it is working fine

    $(function() {
  var chart = new Highcharts.Chart(

  {
  "meta": {
    "drilldownEnabled": false
  },
  "chart": {
  renderTo:"container",
    "additionalData": {
      "dateTime": false,
      "datetype": "string",
      "cliccable": true,
      "drillable": false,
      "drillableChart": false,
      "isCockpit": true,
      "categoryColumn": "CATEGORY",
      "categoryGroupBy": "",
      "categoryGroupByNamens": "",
      "categoryName": "CATEGORY",
      "categoryOrderColumn": "",
      "categoryOrderType": "",
      "categoryStacked": "",
      "categoryStackedType": ""
    },
    "zoomType": "xy",
    "panning": true,
    "type": "line",
    "backgroundColor": "#FFFFFF",
    "heightDimType": "pixels",
    "widthDimType": "pixels",
    "plotBackgroundColor": null,
    "plotBorderWidth": null,
    "plotShadow": false,
    "borderColor": "#FFFFFF",
    "style": {
      "backgroundColor": "#FFFFFF",
      "fontFamily": "",
      "fontWeight": "",
      "fontSize": ""
    },
    "events": {}
  },
  "colors": [
    "#7cb5ec",
    "#434348",
    "#90ed7d",
    "#f7a35c",
    "#8085e9",
    "#f15c80",
    "#e4d354",
    "#2b908f",
    "#f45b5b",
    "#91e8e1"
  ],
  "title": {
    "text": "",
    "style": {
      "align": "",
      "color": "",
      "fontFamily": "",
      "fontSize": "",
      "fontWeight": ""
    }
  },
  "legend": {
    "itemDistance": 0,
    "symbolPadding": 25,
    "enabled": false
  },
  "xAxis": [
    {
      "plotBands": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "from": 0,
          "to": 0
        }
      ],
      "plotLines": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "dashStyle": "",
          "value": 0,
          "width": 0
        }
      ],
      "type": "category",
      "id": 0,
      "title": {
        "customTitle": false,
        "text": "CATEGORY",
        "style": {}
      },
      "labels": {

        "style": {
          "color": "",
          "fontFamily": "",
          "fontSize": "",
          "fontWeight": ""
        },
        "align": ""
      }
    }
  ],
  "yAxis": [
    {
        allowDecimals:true,
      "plotBands": [
        {
          "label": {

            "text": "",
            "align": "center"
          },
          "color": "",
          "from": 0,
          "to": 0
        }
      ],
      "plotLines": [
        {
          "label": {

            "text": "",
            "align": "center"
          },
          "color": "",
          "dashStyle": "",
          "value": 0,
          "width": 0
        }
      ],
      "min": 0,
      "title": {
        "text": "NUMBER",
        "customTitle": false,
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": ""
        }
      },
      "labels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontSize": "",
          "fontWeight": ""
        },
        "align": ""
      },
      "gridLineDashStyle": "$convertedTypeline",
      "minorGridLineDashStyle": "$convertedMinorTpeline"
    }
  ],
  "series": [
    {
      "name": "NUMBER",
      "dataLabels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": "",
          "fontStyle": ""
        },
        "enabled": true,
        "labelFormat": "{y:,.2f}"
      },
      "data": [
        {
          "drilldown": false,
          "y": 0.1,
          "name": "CLASSE 1",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 0.5,
          "name": "CLASSE 2",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 1.3,
          "name": "CLASSE 3",
          "datetype": "string"
        }
      ],
      "selected": true,
      "tooltip": {
        "valueDecimals": 2,
        "scaleFactor": "empty",
        "ttBackColor": "#FCFFC5"
      },
      "yAxis": 0
    }
  ],
  "tooltip": {
    "borderWidth": 0,
    "borderRadius": 0,
    "followTouchMove": false,
    "followPointer": true,
    "useHTML": true,
    "backgroundColor": null,
    "style": {
      "padding": 0
    }
  },
  "lang": {
    "noData": ""
  },
  "noData": {
    "style": {
      "fontFamily": "",
      "fontSize": "",
      "color": ""
    },
    "position": {
      "align": "center",
      "verticalAlign": "middle"
    }
  },
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "line": {
      "marker": {
        "symbol": "circle",
        "lineWidth": 2
      }
    },
    "series": {
      "events": {},
      "showCheckbox": true,
      "cursor": "pointer",
      "point": {
        "events": {}
      },
      "dataLabels": {
        "allowOverlap": true
      },
      "turboThreshold": 2000
    }
  }
}

  );
});

http://jsfiddle.net/JeLrb/520/ please note this decimal values on vertical axis, but for some unknown reason when it comes to rendering on my application, the decimal does not apply

enter image description here

I even tried adding for example tickInterval: 0.25, and it DOES separate it but it still shows 1 and 1 again and 1 again, and if i put tickInterval: 0.50, it shows 2 times less on yAxis, which implies that it DOES work but it just refuses to show decimals.

do you have any idea what might be the problem ? Perhaps libraries ? Any guidance will help me. Thank you

Upvotes: 0

Views: 504

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

I have no idea why the same chart options are shown differently in jsfiddle and your environment. However, you can customize yAxis labels using yAxis.labels.formatter function. There you should have access to values with decimals. Check demo I posted you below.

  formatter: function() {
    return this.value.toFixed(2);
  }

Demo:
http://jsfiddle.net/w23bgnvp/

Upvotes: 1

Related Questions