YouTip

\n\n[Highcharts Column Chart](#)\n\nThe following example demonstrates a column chart with rotated labels.\n\nWe have already covered the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations. Add the `rotation` property within `dataLabels`:\n\n* * *\n\n## Configuration\n\n### dataLabels : Data Labels\n\n`dataLabels` defines whether data labels are displayed on the chart.\n\nThe degree of text rotation is determined by the `rotation` property. We can also define the background, spacing, border, etc., of the text label through other properties.\n\n```javascript\ndataLabels = {\n enabled: true,\n rotation: -90,\n color: '#FFFFFF',\n align: 'right',\n format: '{point.y:.1f}', // one decimal\n y: 10, // 10 pixels down from the top\n style: {\n fontSize: '13px',\n fontFamily: 'Verdana, sans-serif'\n }\n}\n\n### Example\n\nFilename: `highcharts_column_rotated.htm`\n\n\n\n$(document).ready(function() {\n var chart = {\n type: 'column'\n };\n var title = {\n text: '2014 Annual Global Most Populous Cities Ranking'\n };\n var subtitle = {\n text: 'Source: Wikipedia'\n };\n var xAxis = {\n type: 'category',\n labels: {\n rotation: -45,\n style: {\n fontSize: '13px',\n fontFamily: 'Verdana, sans-serif'\n }\n }\n };\n var yAxis ={\n min: 0,\n title: {\n text: 'Population (millions)'\n }\n };\n var tooltip = {\n pointFormat: '2008 Annual Population: {point.y:.1f} Million'\n };\n var credits = {\n enabled: false\n };\n var series= [{\n name: 'Population',\n data: [\n ['Shanghai', 23.7],\n ['Lagos', 16.1],\n ['Instanbul', 14.2],\n ['Karachi', 14.0],\n ['Mumbai', 12.5],\n ['Moscow', 12.1],\n ['Sao Paulo', 11.8],\n ['Beijing', 11.7],\n ['Guangzhou', 11.1],\n ['Delhi', 11.1],\n ['Shenzhen', 10.5],\n ['Seoul', 10.4],\n ['Jakarta', 10.0],\n ['Kinshasa', 9.3],\n ['Tianjin', 9.3],\n ['Tokyo', 9.0],\n ['Cairo', 8.9],\n ['Dhaka', 8.9],\n ['Mexico City', 8.9],\n ['Lima', 8.9]\n ],\n dataLabels: {\n enabled: true,\n rotation: -90,\n color: '#FFFFFF',\n align: 'right',\n format: '{point.y:.1f}', // one decimal\n y: 10, // 10 pixels down from the top\n style: {\n fontSize: '13px',\n fontFamily: 'Verdana, sans-serif'\n }\n }\n }];\n var json = {};\n json.chart = chart;\n json.title = title;\n json.subtitle = subtitle;\n json.xAxis = xAxis;\n json.yAxis = yAxis;\n json.tooltip = tooltip;\n json.credits = credits;\n json.series = series;\n $('#container').highcharts(json);\n});\n\nThe output of the above example is:\n\n[Highcharts Column Chart](#)