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 Query
- How do I display the Y axis on top of the X?
- how to display 2 same highcharts without duplicate the code
- 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 ?
- How can I display crosshair labels on top of the chart with Highcharts
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- how to display the date at X axis and other column at y axis in highcharts
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- How to use the tooltip formatter and still display chart color (like it does by default)?
- 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 can I get the max value of a y axis at highcharts?
- Highcharts - How to display legend symbol inside the tooltip
- How can I change the unit at y axis dynamically at Highcharts?
- How to display highchart y axis with constistant data
- r- how to display the labels on the highcharter objects all the time
- Highcharts : How to fix labels to the top when xAxis rotation is 90°?
- How to place x axis labels on top of horizontal bar chart
- how to get the axis value when I click on a cursor in highstock(high charts)?
- How to catch the click event from the axis ticks jqplot, highcharts,flot
- How do I put Icons in the y Axis for a Dynamic Highcharts chart?
- how to display the title in the middle of a donut chart with legend?(react-highcharts)
- Highcharts - how to create multiple y axis and group the data series
- How can I set the alignment for individual axis labels in highcharts?
- How to disable the display of the charts with highcharts?
- With HighCharts, how can I have the same tooltip formatter as my y axis
- How to display rounded corners in a highcharts column on a Y Axis that starts above 0
- How can I display the outcome of the for loop in highcharts
- How to do In highchart tooltip display the first 100 characters and then say "See more .."?
- How to align bottom of legend to the X axis line?
- How to display a clickable pie chart in the cell of a html table?
More Query from same tag
- High-chart Div save as image and save file in server path
- column charts first date cut issue
- Highcharts- chart does not display
- Highstock, error: Uncaught TypeError: w[(intermediate value)(intermediate value)(intermediate value)] is not a constructor
- Highcharts dataLabels reposition on overlap
- Highcharts: How to make startRow and endRow work again when data is stored in Google Spreadsheet?
- How to achieve linear gradient for bar graph in highcharts
- Highcharts Remove Space across the x-Axis
- high chart column chart dynamic update with ajax
- Customize Highchart Map's legend type and color
- Month wise category separation in Highcharts
- Highcharts add ellipsis for long data
- Using directive scope to update Highcharts
- Highcharts add image on export
- Finding the Y axis value for a plot line in HIghCharts.js
- Android highcharts library chart loading completed listener event
- Possibilities/advise for creating a grid-like Dashboard with graphs (highcharts)?
- Formatter Using HighCharts
- Errors with Highcharts/Highstock and React, unexpected token
- Plotting 75000 points on a rich Scatter Chart with Tooltips
- How to increase the height of highchart?
- Highcharts navigation button and fullscreen button in bootstrap
- HIghcharts Legend Symbol Getting out of graph Canvas
- Highcharts: How to display multiple tooltips by click in multiple series with shared true
- How to modify Column stacked percent Chart in Highcharts
- How to place one highchart on top of another
- Adding narrative to pie chart (highcharts)
- Heatmap: Append new data rows
- highstock mouse releaase trendline
- Export Highchart + HTML as Image in angularjs app