score:1
Accepted answer
Use formatter in yAxis
$(function () {
var yAxisLabels = [0,10,20,30,40,50,60,70,80,90,100];
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
min: '0',
title: {
text: 'Percentage'
},
tickPositioner: function() {
return yAxisLabels;
},
labels: {
formatter: function(){
return 100*this.value / $(this.axis.tickPositions).last()[0] + '%';
}
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
},
column: { stacking:'percent', pointPadding: 0.2, borderWidth: 0 }
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
Update With New Requirement
Change
stacking: 'percentage',
to stacking: 'normal',
so final code
$(function () {
var yAxisLabels = [0,1000000,2000000,3000000,4000000,5000000,6000000,7000000,8000000,9000000];
var categories= ['1990', '2000', '2010', '2020', '2030', '2040', '2050'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
min: '0',
title: {
text: 'Y-AXIS'
},
tickPositioner: function() {
return yAxisLabels;
},
labels: {
formatter: function(){
return this.value;
}
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
}
},
series: [{
name: 'Africa',
data: [100000, 100000, 500000, 900000, 900000, 900000, 555268]
}, {
name: 'L. America',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Oceania',
data: [100000, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'S-E. Asia',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Japan',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'China',
data: [25020, 296350, 100000, 241947, 331402, 443634, 555268]
}, {
name: 'Near East',
data: [25020, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'Asian CIS',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Russia',
data: [25020, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'East Europe',
data: [25020, 296350, 100000, 241947, 331402, 443634, 555268]
}, {
name: 'Central Europe',
data: [25020, 296350, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'W. Europe - Nordic',
data: [25020, 100000, 222809, 241947, 331402, 443634, 555268]
}, {
name: 'Nordic',
data: [100000, 296350, 222809, 100000, 331402, 443634, 555268]
}, {
name: 'N. America',
data: [25020, 296350, 222809, 241947, 331402, 100000, 555268]
}]
});
});
score:1
A simpler way to go about this is using the tickInterval
attribute:
yAxis: {
title: {
text: 'Percent'
},
tickInterval: 10,
labels: {
formatter: function(){
return this.value + '%';
}
}
},
That will force your axis intervals to show up as you requested.
I hope this helps!
Source: stackoverflow.com
Related Query
- HIghcharts how to change values and ranges in the Y-axis
- how to pass values to tooltip which not in x and y axis in highcharts
- Highcharts - how to create multiple y axis and group the data series
- How do I dynamically change the yAxis min, max and tickInterval in HighCharts
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- highcharts how to make x and y axis starting on the same zero using categories on yAxis
- How to change the X and Y axis names of Pie chart High Chart?
- how can I use rangeselector and navigation in highcharts in the given code
- HIGHCHARTS - Given a series with UNIX stamps and values pairs for the data, how do I show only the date for the first and last point on xAxis?
- Highcharts - how to position values closer to the Y axis
- how to display the date at X axis and other column at y axis in highcharts
- How do you change the colour of each category within a highcharts column chart?
- How can I change the colors of my highcharts piechart?
- how to set the interval of points on Y - Axis highcharts
- How replicate the value of Y Axis on both sides of the axis in Highcharts
- How to change the text color in Highcharts
- How do you increase the performance of highcharts chart creation and rendering
- How can I change the unit at y axis dynamically at Highcharts?
- How to change graph colour above and below plotline in Highcharts
- Highcharts how to change x axis options
- How to update new plotline values instead of removing and adding new ones in highcharts
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- How to add space between chart and axis in highcharts
- How to change axis label size when exporting in Highcharts / Highstock
- How to Check and Uncheck all the Legend elements in HighCharts Linechart?
- Change Datalabel Color, Rotation and Align values based on Column value in highcharts
- How can i change highcharts data values by selecting from a dropdown list
- Highcharts - Bar - Setting the X axis width and the chart area width to be constant
- How to show only specific x-axis values on datetime axis in Highcharts
- How to set series-label to false by default and change the color of series label text in highchart
More Query from same tag
- HIGHCHART: HOW TO START TICK AT (0,0)
- High charts undefined value on customizing tool tip - Unable to get the ID from array
- Highcharts plotOptions.series.compare='percent' renders blank
- Highcharts - Using 'errorbar' type overrides axis interval
- HighChart with multple JSON api data
- Checkbox behavior after accessing a post method in rails app
- How to use selenium IDE to find/check if a div object has children?
- Yii vs Highcharts vs Ajax
- drag and drop plotline angular2-highcharts typescript
- Highcharts - tooltip headerformat for 2 decimal places not working
- Resolve Conflict When Using Highchart and Treemap together ( f.inArray is not a function)
- Highcharts swipe smooth move feature
- highchart treemap parent label as tile
- I am using click event to trigger a new page to generate the drill down data from highcharts however the entire chart is being generated
- Disable percent stacking on legendItemClick in percent stacked column highchart
- how to generate topgrading snapshot chart?
- HIghcharts 4 solid gauge max value
- x-area labels on hover
- Background image isn't appearing in Highcharts
- JQuery UI tabs and multiple Highcharts
- Highcharts - multiple yAxis each with its own tooltip
- Updating highcharts dynamically with json response
- How to define colorAxis dataClasses for solid gauge chart?
- Highcharts need parse data for showing points?
- R HighCharter Stock Graph not correctly pulling dates
- Highcharts one input of the three not working
- Highcharts: Network graph: marker radius = number of connections
- Highcharts datetime label for column
- Math in highcharts to change units?
- Highcharts/Highstocks: How to manually set the X-axis range