I am currently using Apex Line Chart to generate 6 series. The issue I am running into is that there are 3 pairs that share a y-axis title and ticks with its partner. If I display 2 series and they are partners their title and ticks display twice on the y axis. The only viable solution that I can think to implement is to have only one of each partner have a display on always, but ideally i want to hide the y axis when the partners aren't selected and display when they are selected. If anyone can help with the latter solution I would be very grateful
const options = {
chart: {
id: 'lineChart',
background: theme.palette.background.paper,
},
colors: [blue, yellow, green, red, pink, neonGreen],
height: '500px',
markers: {
size: 5,
},
series: [
{
name: 'Whopper fat',
data: whopperFatSeriesData,
},
{
name: 'Whopper Calories',
data: whopperCaloriesSeriesData,
},
{
name: 'Whopper Cost',
data: whopperCostSeriesData,
},
{
name: 'McDouble fat',
data: mcDoubleFatSeriesData,
},
{
name: 'McDouble Calories',
data: mcDoubleCaloriesSeriesData,
},
{
name: 'McDouble Cost',
data: mcDoubleCostSeriesData,
},
],
stroke: {
width: 2,
},
theme: {
mode: theme.palette.type,
},
tooltip: {
shared: true,
custom: function ({ dataPointIndex }: { dataPointIndex: number }) {
return renderToStaticMarkup(
<CustomTooltip data={whopperFatSeriesData} dataPointIndex={dataPointIndex}></CustomTooltip>,
)
},
},
title: {
text: 'Cloud Usage',
offsetY: -8,
style: {
fontSize: '24px',
},
},
xaxis: {
type: 'datetime',
title: {
text: '',
offsetY: 8,
style: {
fontSize: '15px',
},
},
labels: {
formatter: function (value: any, timestamp: any, index: any) {
return moment.utc(timestamp).format('DD-MMM-YY')
},
},
},
yaxis: [
{
max: getMaxCalories,
seriesName: 'Whopper Fat',
title: {
text: 'Whopper Fat (g)',
offsetX: -8,
style: {
fontSize: '15px',
},
},
decimalsInFloat: 3,
},
{
title: {
text: 'Whopper Calories (kc)',
opposite: -8,
style: {
fontSize: '15px',
color: yellow,
},
},
decimalsInFloat: 2,
opposite: true,
axisBorder: {
show: true,
color: yellow,
},
axisTicks: {
show: true,
},
showAlways: false,
},
{
title: {
text: 'Cost ($)',
offsetX: -8,
style: {
fontSize: '15px',
color: green,
},
},
decimalsInFloat: 2,
opposite: true,
axisBorder: {
show: true,
color: green,
},
axisTicks: {
show: true,
},
showAlways: false,
},
{
max: getMaxCalories,
title: {
text: 'McDouble fat (g)',
offsetX: -8,
style: {
fontSize: '15px',
},
show: false,
},
decimalsInFloat: 3,
show: false,
},
{
title: {
text: 'McDouble Calories (kc)',
opposite: -8,
style: {
fontSize: '15px',
color: yellow,
},
},
decimalsInFloat: 2,
opposite: true,
axisBorder: {
show: true,
color: yellow,
},
axisTicks: {
show: true,
},
showAlways: false,
},
{
title: {
text: 'Cost ($)',
offsetX: -8,
style: {
fontSize: '15px',
color: green,
},
},
decimalsInFloat: 2,
opposite: true,
axisBorder: {
show: true,
color: green,
},
axisTicks: {
show: true,
},
showAlways: false,
},
],
}
Image of Chart
Related
I am working on page, where i need to have multiple plots, one being a solid gauge and the other being a line graph.
I am using the Ionic Framework 5 with angular and High Charts.
I am finding that when one plot is displayed, it works fine, but with more then one I am getting some type of conflict where the line chart does not get updated and the gauge gets data which is meant for the line graph.
This my code. Do i need to do anything in perticular?
particulate_plot() {
let particulte_chart = this.particulte_chart.stockChart('particulate_plot', {
chart: {
type: 'line',
animation: true,
backgroundColor: "#464340",
},
credits: {
enabled: false
},
legend: {
enabled: true,
layout: 'horizontal',
verticalAlign: 'bottom',
floating: false,
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
title: {
text: "Particulate Mass Concentration",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b',
},
title: {
text: 'Date',
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
labels: {
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
}
},
yAxis: {
min: 0,
opposite: false,
title: {
text: "Mass \xb5g/m\xb3",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
labels: {
formatter: function() {
return (this.value.toFixed(2) ? '' : '') + this.value.toFixed(2);
},
style: {
"color": "#f4f5f8",
"fontSize": "12px"
}
},
plotLines: [{
label: {
text: "EU Limit 40 \xb5g/m\xb3",
style: {
"color": "#f4f5f8",
"fontSize": "12px"
},
align: 'center',
y: -10,
},
color: 'red', // Color value
value: 3, // Value of where the line will appear
width: 5 // Width of the line
}],
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
boostThreshold: 0,
color: '#FFF59D',
name: "PM1.0",
type: 'spline',
data: this.datasets[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#FFAB40',
name: "PM2.5",
type: 'spline',
data: this.datasets_b[0].data,
showInNavigator: true,
visible: true,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#90CAF9',
name: "PM4",
type: 'spline',
data: this.datasets_c[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
},
{
boostThreshold: 0,
color: '#4DD0E1',
name: "PM10",
type: 'spline',
data: this.datasets_d[0].data,
showInNavigator: true,
visible: false,
lineWidth: 1,
}
],
"tooltip": {
"pointFormat": "<b>{point.y:.2f}</b>",
"shared": true
},
});
}
}
air_main_gauge() {
let maingauge_chart = this.maingauge_chart.stockChart('MainGuageA', {
chart: {
type: 'solidgauge',
backgroundColor: 'white',
},
credits: {
enabled: false
},
pane: {
center: ['50%', '50%'],
size: '100%',
innerSize: '10%',
startAngle: -150,
endAngle: 150,
background: {
backgroundColor: HighCharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '85%',
outerRadius: '100%',
shape: 'arc'
}
},
lineWidth: 1,
tooltip: {
enabled: false
},
navigator: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
enabled: false
},
scrollbar: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
// title: {
// text: 'Speed'
// },
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.8, '#ed1f1f'] // red
],
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
gridLineWidth: 10,
gridLineColor: 'transparent',
labels: {
enabled: false
},
title: {
enabled: false
}
},
series: [{
// name: 'Speed',
data: [20],
dataLabels: {
format: '<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>',
position: 'right',
},
tooltip: {
// valueSuffix: ' km/h'
enabled: false
}
}],
plotOptions: {
solidgauge: {
innerRadius: '85%',
dataLabels: {
y: -45,
borderWidth: 0,
useHTML: true
}
},
},
});
}
</ion-row><ion-row class="ion-align-self-start"><!-- <script src="https://code.highcharts.com/highcharts.js"></script>--><script src="https://code.highcharts.com/stock/highstock.js"></script><script src="https://code.highcharts.com/highcharts-more.js"></script><script src="https://code.highcharts.com/modules/solid-gauge.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.highcharts.com/modules/export-data.js"></script><script src="https://code.highcharts.com/modules/accessibility.js"></script><div id="particulate_plot" style="width:100%; height:100%;"></div><div id="MainGuageA" style="width: 100%;" class="posi"></div><!-- <ion-item class="leafpostion" lines="none"></ion-item>--><!-- <ion-icon name="leaf" class="leaf"></ion-icon>--></ion-row>
Hope you guys are doing okay.
I am working on a line graph from Apex Charts and every thing seems to be working fine except one issue.
The lines cross-over/overflows on the y axes whereas they are supposed to stay between the y axes. I have tried adding offsetX to almost everything but it just doesn't seem to work.
What is it that I am doing wrong here? How can I fix it?
Here's CODEPEN.
Here's an image of the issue:
Here's the snippet:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
foreColor: 'red', // numbers color
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
export: {
csv: {
filename: 'data',
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: 'data',
},
png: {
filename: 'data',
}
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
padding: {
left: 0,
right: 0
},
borderColor: "rgba(0,0,0,0.1)"
},
colors: ['red', 'blue', 'yellow'],
stroke: {
width: 2,
},
tooltip: {
theme: "dark"
},
series: [{
name: "Cost",
data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
},
{
name: "Revenue",
data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
},
{
name: "Profit %",
data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
}
],
yaxis: [{
title: {
text: "Cost / Revenue"
},
seriesName: "Cost",
tickAmount: 5,
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
{
title: {
text: "Kilograms"
},
seriesName: "Weight 1",
show: false
},
{
title: {
text: "Profit %"
},
opposite: true,
tickAmount: 5,
seriesName: "Profit %",
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
xaxis: {
tickPlacement: 'on',
axisBorder: {
color: 'red',
},
axisTicks: {
color: 'blue',
},
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>
You can fix it by removing padding inside grid options:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
foreColor: 'red', // numbers color
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
export: {
csv: {
filename: 'data',
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: 'data',
},
png: {
filename: 'data',
}
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
borderColor: "rgba(0,0,0,0.1)"
},
colors: ['red', 'blue', 'yellow'],
stroke: {
width: 2,
},
tooltip: {
theme: "dark"
},
series: [{
name: "Cost",
data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
},
{
name: "Revenue",
data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
},
{
name: "Profit %",
data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
}
],
yaxis: [{
title: {
text: "Cost / Revenue"
},
seriesName: "Cost",
tickAmount: 5,
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
{
title: {
text: "Kilograms"
},
seriesName: "Weight 1",
show: false
},
{
title: {
text: "Profit %"
},
opposite: true,
tickAmount: 5,
seriesName: "Profit %",
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
xaxis: {
tickPlacement: 'on',
axisBorder: {
color: 'red',
},
axisTicks: {
color: 'blue',
},
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>
Need help with highchartsJs. I need chart like on screenshots. For lines i found this, but not fully what i needed. For square i don't have any ideas. Square is most priority.
Any help will be appreciated. Thanks.
square
horizontal lines
If someone need something like this
https://jsfiddle.net/gdgb941o/20/
chart: {
type: 'column'
},
title: {
text: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
tickWidth: 0,
lineWidth: 0,
type: 'category',
gridLineWidth: 0
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
labels: {
enabled: false
},
max: 100,
title: {
text: false
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
grouping: false
},
series: {
}
},
series: [{
data: [{
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'Yes',
y: 100,
dataLabels: {
formatter: function() {
return "33" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}, {
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'The email did not come',
y: 100,
dataLabels: {
formatter: function() {
return "80" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}, {
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'Error in verification',
y: 100,
dataLabels: {
formatter: function() {
return "55" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
},
{
borderWidth: 2,
borderColor:'#41bc9b',
color: 'white',
name: 'No',
y: 100,
dataLabels: {
formatter: function() {
return "20" + "%"
},
enabled: true,
inside: true,
align: 'center',
color: 'black',
style: {
fontSize: 20,
textOutline: false
}
}
}]
}, {
pointPadding: 0.125,
data: [{
color: '#41bc9b',
name: 'Yes',
y: 33
}, {
color: '#41bc9b',
name: 'The email did not come',
y: 80
}, {
color: '#41bc9b',
name: 'Error in verification',
y: 55
},
{
color: '#41bc9b',
name: 'No',
y: 20
}]
}]
I have created a Bar graph using echarts. I want to bind multiple values to data object dynamically, currently I'm able to bind only single value. here is my java script. I'mm a newbie for this, hoping for a fully functional solution.
var myChart = echarts.init(document.getElementById('page_views_today'));
var option = {
// Setup grid
grid: {
zlevel: 0,
x: 20,
x2: 40,
y: 20,
y2: 20,
borderWidth: 0,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow', // line|shadow
lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 },
shadowStyle: { color: 'rgba(0,0,0,.1)' }
}
},
// Add legend
legend: {
data: []
},
toolbox: {
orient: 'vertical',
show: true,
showTitle: true,
color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'],
feature: {
mark: { show: false },
dataZoom: {
show: true,
title: {
dataZoom: 'Data Zoom',
dataZoomReset: 'Reset Zoom'
}
},
dataView: { show: false, readOnly: true },
magicType: {
show: true,
itemSize: 12,
itemGap: 12,
title: {
line: 'Line',
bar: 'Bar',
},
type: ['line', 'bar'],
option: {
/*line: {
itemStyle: {
normal: {
color:'rgba(3,1,1,1.0)',
}
},
data: [1,2,3,4,5,6,7,8,9,10,11,12]
}*/
}
},
restore: { show: false },
saveAsImage: { show: true, title: 'Save as Image' }
}
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h'
],
axisLine: {
show: true,
onZero: true,
lineStyle: {
color: 'rgba(63,81,181,1.0)',
type: 'solid',
width: '2',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
}],
// Vertical axis
yAxis: [{
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: 'fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
onZero: true,
lineStyle: {
color: '#ff0000',
type: 'solid',
width: '0',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
}],
// Add series
series: [
{
name: 'Page Views',
type: 'bar',
smooth: true,
symbol: 'none',
symbolSize: 2,
showAllSymbol: true,
barWidth: 10,
itemStyle: {
normal: {
color: 'rgba(63,81,181,1.0)',
borderWidth: 2, borderColor: 'rgba(63,81,181,1)',
areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' }
}
},
data: []
}
]
};
Here is my java-script function from where I want to bind the values dynamically.
// Load data into the ECharts instance
load_graph_with_positions(option);
function load_graph_with_positions(option) {
option.series[0].data[0] = 1234;
myChart.setOption(option);
}
One way to do this is by passing values in an array and then shifting the previous values, while pushing-in the data. Following is the example of shiting and pushing the data:
option.series[0].data.shift();
option.series[0].data.push(json.num);
Hence your function will become:
function load_graph_with_positions(option,values) {
var valuesLength = values.length;
for (var i = 0; i < valuesLength; i++) {
option.series[0].data.shift();
option.series[0].data.push(values[i]);
}
myChart.setOption(option);
}
You can also refer to following github example for dynamic addition:
https://github.com/hisune/Echarts-PHP/blob/master/demo/dynamic.php
Here's a column chart - https://jsfiddle.net/kx8qqh2e/
When you hover on a column, it shows a nice tooltip. I want to show the tooltips on all the columns at all times without having the user to hover over them. How can I achieve this?
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
series: [
{
colorByPoint: true,
data: [
{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}
]
}
]
};
$('#categorywise-apf-graph').highcharts(chart_data);
For the sake of clarity and posterity:
You can turn off the standard tooltip, and use the dataLabels to accomplish your goal.
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
By default, a small label with the y value of the column will be placed above the column.
You can use the extensive configuration options, and the formatter function, to customize this label in a wide variety of ways, making it more like the standard tooltip
Example of a highly customized version of the dataLabel:
Code:
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(0,0,0,0.8)',
borderColor: 'rgba(0,0,0,0.9)',
color: 'rgba(255,255,255,0.75)',
borderWidth: .5,
borderRadius: 5,
y: -10,
style: {
fontFamily: 'Helvetica, sans-serif',
fontSize: '10px',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<strong>'+this.series.name+'</strong>'
+'<br/>Group: <strong>'+ this.x+'</strong>'
+'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
}
}
}
},
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/
Output:
[{ EDIT --
And, since having big labels like this can be distracting when what you really want to do is just see the data plotted, here's a version with a button to toggle the visibility of the labels:
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/4/
Code:
<button id="toggle">Toggle Data Labels</button>
$('#toggle').click(function() {
var enabled = chart.series[0].options.dataLabels.enabled;
console.log(enabled);
chart.series[0].update({ dataLabels: { enabled: !enabled }});
});
-- /EDIT }]
Hopefully This Fiddle answers your question.
The effect you want was achieved by using the plotOptionsAPI link here directive in highcharts.
$(document).ready(function() {
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'left',
enabled: true
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}]
}]
};
$('#categorywise-apf-graph').highcharts(chart_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div style="width: 500px; height: 500px;" id="categorywise-apf-graph"></div>