score:22
just try formatting the data label on a column chart, here is an example to get you started.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xaxis: {
categories: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']
},
plotoptions: {
series: {
datalabels: {
enabled: true,
color: '#000',
style: {fontweight: 'bolder'},
formatter: function() {return this.x + ': ' + this.y},
inside: true,
rotation: 270
},
pointpadding: 0.1,
grouppadding: 0
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
score:5
really, what this case calls for, is for this to be a bar instead of a column, and category labels that are not rotated, and are clearly readable.
example:
http://jsfiddle.net/jlbriggs/yplvp/23/
you can also offset the axis labels to put category name on the bar itself, but really - it's just not as good a way to display as the above example:
http://jsfiddle.net/jlbriggs/yplvp/24/
these could both be a column instead of a bar still, of course, but rotating the labels is always a bad idea if it can be avoided.
these methods also allow the data label to still be used as a data label should that ever be required.
Source: stackoverflow.com
Related Query
- HighCharts Place Label on Bar
- How to add a label above each bar in HighCharts
- Highcharts: How to provide a custom stack label in highcharts bar graph from within the stackLabel formatter?
- Centering a data label in Highcharts Bar Chart
- Why is the first label on highcharts bar chart missing?
- Highcharts display label for pie chart using html table as data source
- Highcharts - Stacked bar - Possible to have label interval corresponding to data interval?
- Highcharts - Bar chart show full label on Y Axis
- Adding a label to the left and to the right of a bar in highcharts
- Label individual bars in a grouped bar chart in Highcharts
- Highcharts - Place the y-axis plot-line label outside the chart area
- Show label for each bar in highcharts
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- Highcharts | Label width control in bar charts
- Disable a complete bar in highcharts when clicking on its label
- Place text in center of pie chart - Highcharts
- How do I rotate my HighCharts bar chart so its vertical, not horizontal?
- Maximum bar width in Highcharts column charts
- Styling bar colors in Highcharts with a gradient issue
- Fixed y-axis label width in Highcharts
- dealing with highcharts bar chart with really long category names
- Highcharts percentage of total for simple bar chart
- Highcharts Change Bar Color Based on Value
- HighCharts - Y-Axis padding in a bar chart
- Highcharts dynamically change bar color based on value
- How do I format x-axis label in highcharts
- print a value on highcharts bar graph?
- How to hyperlink bar graph in highcharts
- Highcharts graph X-axis label for different date ranges
- highcharts jquery dynamic change chart type column to bar
More Query from same tag
- Highcharts: how to separate stacked columns on datetime axis
- append point in the middle of graph
- Please help Highcharts - Windrose graph display bars from top to center
- Highcharts - Rails array includes empty date entries
- Highcharts: wrong labels align for inverted charts
- Javascript parameter is returned as both value and undefined
- How to apply color stops in highcharter?
- Highcharts yAxis setExtremes far off
- Highcharts - Pinch zoom does not work on chart with multiple y axes
- Control spacing and height between bars in Highcharts.js bar chart
- Highcharts: trying to update series
- How to make highcharts boxplot with drilldown?
- Build charts from polling JSON data
- Angular Highcharts Radial Bar Chart not working as expected
- I want to add border radius in stack graph in high charts for some particular data
- Spline chart drawn on the xaxis in case of single value or constant values - highchart
- Highcharts Network Graph Arrow Links
- Highcharts Columnrange Questions (multiple y-axes and column widths)
- Get images from Highcharts PHP Laravel
- Highcharts: Need heatmap with month and date
- Error Bars in High Charts: What to do when the x axis is divided into categories?
- Highcharts incorrect pertange calculation
- Highcharts JS remove tips & squared legends for linear chart
- Highcharts: Align multiple charts in same container
- In Highcharts, shared tooltips ruin crosshairs on the Y axis
- Highchart multiaxis timeliine chart without rangeselector
- Highcharts issue in Data spline overlap
- highcharts scatter change point color
- Add Gradient Pie Chart functionality to Highcharts-ng
- Highcharts stacked drilldown with n-levels