Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.
For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info
series: [{
color: colors[0],
showInLegend: false,
data: [{
....//first value
, {
y: 3500,
name: 'Second',
color: colors[1],
dataLabels: {
inside: true //labels will be inside column
}
},... // third and remaining
});
Fiddle demonstration
Related
Am using high charts, when am calculating the average time and plotting the pin position slightly changed. Here am attaching the screen shot, please have a look on it and help me out from this. Thank you.
Here is my series,
var data = [
{
name: 'No. of potholes',
data: seriesArray,
stack: 'North',
color: 'lightblue'
},
{
type: 'line',
name: 'Average',
data: seriesAvg,
color: 'orange',
marker: {
lineWidth: 2,
lineColor: 'orange',
fillColor: 'white'
}
},
{
name: 'KPI',
color: 'grey'
},
]
The plotting circle position has been changed:
This is caused by the grouping functionality (https://api.highcharts.com/highcharts/series.column.grouping):
When it is enabled each column series has a reserved space in every group. There're two column series in your chart. The second column series occupies half of the space in each group even though it has no data.
Set grouping to false to prevent this unwanted behavior.
I am using Highcharts 4.0.
This is what I get with the default parameters.
I want to customize it while I can't find the docs.
This is what I expect:
The background polygon can be filled at a specified color/transparency (eg. dark green in this picture)
The valued polygon can be filled at a specified color/transparency (eg. blue in this picture)
The value number can be displayed
The unwanted scale-number (0, 2.5, 5) can be hidden
All these options are described in the Highcharts-API-Doc: http://api.highcharts.com/highcharts
1) The background polygon can be filled at a specified color/transparency (eg. dark green in this picture)
This is tricky. You can either try to add a plotBand to the yAxis, but you need to know the max Value, otherwise it will leave a white gap. All the other options (set a background color to the pane or chart.plotBackgroundColor options do not take the shape of the polar chart into account.
yAxis: {
plotBands: {
from:0,
to: 75000,
color: '#0c0'
}
}
2) The valued polygon can be filled at a specified color/transparency (eg. blue in this picture)
set the type of the series to 'area', you can then style it either directly in the series or via the plotOptions.series-Object
series: [{
name: 'Whatever',
type: 'area',
data: [...]
}]
[...]
plotOptions: {
area: {
fillOpacity: 0.9
}
}
3) The value number can be displayed
for areas, set the dataLabels.enabled property to true
plotOptions: {
area: {
dataLabels: {
enabled: true
}
}
}
4) The unwanted scale-number (0, 2.5, 5) can be hidden
set the labels.enabled property of the yAxis to false
yAxis: {
labels: {
enabled: false
}
}
Fiddle http://jsfiddle.net/doc_snyder/qnqux036/
I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}
I want to dynamically align the dataLabel in center of two bars.
The data which is visible dynamically appears either for green or the blue bar by using :
dataLabels: {
enabled: true,
formatter: function() {
return this.point.avg;
}
}
I dont want to use x and y attributes, as data can appear for any of the bar. Hope below mentioned image gives you a clear picture.
Note: The value of avg_fare does not represent the bar's value.
Can anyone help me to achieve this usecase?
Thanks
You can use the dataLabels.y parameter to offset the label into the position you desire.
series: [{
data: series1,
dataLabels: {
enabled: true,
y: -14 // move this down
}
}, {
data: series2,
dataLabels: {
enabled: true,
y: 14 // move this one up
}
}]
Here's a fiddle.
enable datalables only for one. and disable for all the remaining ones.
position that single label as you want by seetting x and y Values
dataLabels: {
align:'left',
enabled: true,
x: 20,
y: -10
},
you can refer this as example : http://jsfiddle.net/fMdk3/
Hope this will help you
Which I am passing to:
series: [{
name: 'Fixed bugs',
data: fixed,
pointWidth: 40
}, {
name: 'Assigned Bugs',
data:assigned,
pointWidth: 40
}, {
name: 'Re-Opened Bugs',
data: Reopened,
pointWidth: 40
},
{
name: 'Closed Bugs',
data: closed,
pointWidth: 40
}]
to this chart and I have the data like this :
data: fixed=[3,5,5,8]
data:assigned=[0,1,0,0]
and follows. Now I want to show the column with zero value to... For me its not showing the column value with zero.
minPointLength will work. Use this.
plotOptions: {
column: {
minPointLength: 3
}
}
You can do this quite simply with the minPointLength option. It sets the minimum number of pixels per column, default is 0, so zero values don't show up. It's in the docs here.
Try this JSFiddle
Here is a way to do it - although I think just having the column be zero-valued and not visible is the best way.
Find a very very low number that none of your data points would ever have but still keep it >0. Let us say it is .005. When you bring in your data any value that is 0 assign it this .005 value. In your tooltip formatter do an IF on the value. If it is .005 then make it 0. This way you get to see the "zero" column but the tooltip displayed will be 0 as well. If you are doing any kind of calculation on the stacked columns then you need to account for this non-0 0 value in there as well.
Not sure what you are trying to display, but maybe you could try to show the datalabels like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: 'gray'
}
}
}
Attempt at demo