score:1
Accepted answer
You can try by specifying the x in negative coordinates, e.g.:
data: [[-21,-1746181], [-20,-1884428],[-19,-2089758], [-18,-2222362], [-17,-2537431], [-16,-2507081], [-15,-2443179],
[-14,-2664537], [-13,-3556505], [-12,-3680231], [-11,-3143062], [-10,-2721122], [-9,-2229181], [-8,-2227768],
[-7,-2176300], [-6,-1329968], [-5,-836804], [-4,-354784], [-3,-90569], [-2,-28367], [-1,-3878] ]
Demo Fiddle
score:1
You can set up duplicate categores with some identifier as well as add empty null
points for the series that does not use them or put [x,y]
points to show which category index it should go to. Then you need to modify your labels to remove the identifier.
New categories:
categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 +',
'a0-4', 'a5-9', 'a10-14', 'a15-19',
'a20-24', 'a25-29', 'a30-34', 'a35-39', 'a40-44',
'a45-49', 'a50-54', 'a55-59', 'a60-64', 'a65-69',
'a70-74', 'a75-79', 'a80-84', 'a85-89', 'a90-94',
'a95-99', 'a100 +'];
New data series:
series: [{
name: 'Male',
data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179, -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768, -2176300, -1329968, -836804, -354784, -90569, -28367, -3878,
null, null, null, null, null, null, null,
null, null, null, null, null, null, null,
null, null, null, null, null, null, null]
}, {
name: 'Female',
data: [null, null, null, null, null, null, null,
null, null, null, null, null, null, null,
null, null, null, null, null, null, null,
1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
1447162, 1005011, 330870, 130632, 21208]
}]
New xAxis.label.formatter
(needed on both xAxis):
formatter: function () {
var text = this.value;
if (text.charAt(0) == "a") {
return text.substring(1);;
} else {
return text;
}
}
You will need a similar thing on the tooltip
:
tooltip: {
formatter: function () {
var text = this.point.category;
if (text.charAt(0) == "a") {
text = text.substring(1);;
} else {
text = text;
}
return '<b>' + this.series.name + ', age ' + text + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
}
Live demo.
Source: stackoverflow.com
Related Articles
- How to display highchart y axis with constistant data
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Highcharts display series.name on X Axis
- Highcharts - Display only year in x axis and stop auto formatting
- Display HH:MM on y axis highcharts
- how to display 2 same highcharts without duplicate the code
- How to display rounded corners in a highcharts column on a Y Axis that starts above 0
- How to display last data point value in a tag on Y Axis in line chart of highChartjs
- 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 display label for pie chart using html table as data source
- Display latest data as a pointer on axis in Highchart
- Strange character in the Highstock source code
- Highcharts :: Need to split y-axis from primary body of chart. Can I display this axis separately from the Highchart?
- How to display months in x axis labels in highcharts
- Display custom values on x axis using Highcharts
- High Chart X Axis to display month and year
- How do I display the Y axis on top of the X?
- Display the Plotted value on x axis using highcharts
- HighCharts. How to display X axis labels line without data?
- Display different value other than x and y axis value
- hchart() Bar Graph does not display all the x axis labels in R
- Display JavaScript Date in X axis in hightcharts
- How to avoid X axis to display decimal values
- Highcharts mulitple y axis unit not display
- Display year in x axis of line graph highcharts
- Highcharts y axis and x axis display
- Highcharts : Under Y Axis we need to display a Image
- highcharts y axis value display left
- Highcharts treemap with drillnodes and color axis : do not display sub level colors in the main level
- Highcharts : Display static Y axis labels from array when series data is null , else auto generated label
- R - Highcharter: Drilldown on stacked column graph
- Highcharts x axis date format issues
- Highcharts changing tooltip datetime with formatter
- highcharts: stop chart from trapping mouse events, or capture mouse click on the ENTIRE chart
- Updating Highcharts series live data in Swift
- How linked/shared legend with pie and column?
- How to have first level as column chart and second level as Fixed placement columns in drill down highcharts
- How to initiate AngularJs directive when its name is set with ng-class
- Use RangeSelector in Highcharts without Date
- How to add HighChart to Angular?
- Highcharts: hide lines for categories
- Highcharts not rendering labels from an html table
- Javascript basic issue regarding passing parameters
- Highcharts line chart doesn't render when sql returns more than 121 rows
- HighChart Line Graph not Showing
- realign Labels only to single Chart or type chart on highcharts
- How to get the array format to function on x axis labels?
- Multiple y-axes causing range to have too much padding
- Column chart not showing series properly in Highcharts
- Relative time in Highstocks chart