Reputation: 2496
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
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
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