score:0
This is a great question. I've worked up a fiddle (http://jsfiddle.net/brightmatrix/uy81h3os/3/) that addresses most of your questions, as well as some suggestions I hope you find helpful.
First, for your axes labels, you can use the formatter
attribute within labels
in each of the axes to define how you want to show them. For your revenue, I included the prefix "$"; I didn't include one for hours.
I used the Highcharts.numberFormat()
function in the formatter
for each axis. This will add a thousands separator (comma) to your numbers and fix the decimal points (the second parameter in that function). For hours, you had fractions of hours, so I set the number of decimals to show at 1. For revenue, I fixed the number of decimals to show at 0. Feel free to change these as you see fit.
As for the K/M labels, I would strongly suggest fixing the values in thousands and stating such in the axes titles (for example, "Revenue (in thousands)"). This is what is typically done in economic and financial charts, and will make the labels clear and consistent for your users. See my changes to your axes title text attributes.
Here's the complete code for the y-axes:
yAxis: [{
title: {
text: 'Hours (in thousands)'
},
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value/1000,0)
}
},
reversedStacks: false,
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.total,1)
}
},
}, {
title: {
text: 'Revenue (in thousands)'
},
labels: {
formatter: function() {
return '$' + Highcharts.numberFormat(this.value/1000,0)
}
},
stackLabels: {
enabled: true,
formatter: function() {
return '$' + Highcharts.numberFormat(this.total,0)
}
},
opposite: true,
reversedStacks: false
}],
I made one other change to your fiddle that you'll see at the top. This adds a thousands separator for all of your numbers, so they show up at 10,000
rather than 10 000
, as you had before. Here is the code:
Highcharts.setOptions({
lang: { thousandsSep: "," }
});
This a global function, so you'll want to place this directly before your chart code.
I'll do some research on your tooltip formatting and edit this answer with further details.
Source: stackoverflow.com
Related Query
- Highcharts format labels on grouped stacked bar diagram with $ k, M for currency and 'hrs' for time
- Tooltip for whole stack in grouped stacked Highcharts diagram
- Add a line on each bar for stacked and grouped column in HighCharts
- Width for labels on x Axis with grouped Categories in Highcharts
- Highcharts stacked bar chart hide data labels not to overlap
- Highcharts tootip for stacked bar charts
- Highcharts stacked column bar with line
- highcharts - precision for stacked column chart data labels
- Adding round corners to Highcharts Bar Chart with stacked bars when value is 0
- Splitted bar chart for paired data with highcharts
- Stacked percent bar in a spark line grid for Highcharts
- Highcharts exporting hide data labels if number doesn't fit in stacked bar
- Highcharts vertical stacked bar chart with negative values, is it possible?
- Highcharts grouped bar charts with multiple axes
- Highcharts bar with negative stack: how to position data labels
- Need a single border for stacked bar graph in Highcharts
- Highcharts stacked bar chart for multiple bars
- How to make split grouped column bar chart in highcharts with percentage?
- HighCharts line series not displaying properly with stacked bar combo chart
- Highcharts single horizontal stacked bar chart with data names (labels) and %-ages always shown and data numbers and series name shown on mousehover
- Highcharts single row stacked horizontal bar: labels overlap --- bar segments too small to read "dataLabels" --- (change "distance" of "dataLabels"?)
- Stacked Bar type of jquery Highcharts with data from HTML Table
- Format used for date in Highcharts - Line with markers chart type
- How can I draw Highcharts horizontal stacked bar with date-time duration
- how to display data labels / stacklabels for a grouped highhcarts- Highcharts
- how to set border radius for stacked bar in highcharts
- Highchart | Grouped stacked bar chart | Multiple stack labels
- Type Labels on Stacked and grouped column - Highcharts
- Is it possible to make a table with y axis labels of Highcharts bar chart?
- HighCharts stacked grouped chart - with grouped caregories plugin
More Query from same tag
- How can I let some Categories have a drilldown and others not?
- Highcharts null endpoints flush with chart sides
- change startOnTick after a (High)chart has been created
- Tooltip doesn't appearing for overlapping datapoints in highchart xrange
- HighCharts - number format with $ in its short form
- How can i enable Drag & Drop in Highcharts organization-charts?
- Highcharts change a series fill opacity on legendItemClick
- HIghcharts - chart width not the size of the parent container
- Passing Decimal string from php to jquery
- Stock tools interacting with another chart/component
- How to set tick interval in highstocks
- highchart autoupdate(addpoint) cause corrupted chart view
- Highchart Json Format for Highchart stock chart
- Hiding points in HighCharts on click
- Customizing the Stockchart range selector buttons from HighCharts library in GWT (and Javascript in general)
- How to tell if series is in upper chart or lower chart in tooltip (using highstock)?
- How can I highlight USA using Highcharts without highlighting Alaska?
- Highcharts - Column Chart Drilldown, how to change the drilldown bar color based on some value
- Highcharts with inverted y-axis, but not inverted data?
- Size and offset for plotBackgroundImage in Highcharts
- Highcharts Solid Gauge width?
- R Highcharter customize legend to show only certain values
- How to align title html div with chart horizontally in highchart?
- Highchart: How to prevent the "flashback" in animation?
- Testing for NaN in a JS array?
- highchart load the chart but not the JSON data
- HIGHCHARTS, Replace zero with 0.1 >
- Javascript Highcharts High buttons and calender with jquery
- Highmaps won't display my GeoJSON lake layer
- Highcharts bar chart with varied bar widths?