How to add a data values inside the slice in pie chart. Can any one help me in this? whether this is possible?
You can use datalalabels - distance parameter : http://api.highcharts.com/highcharts#plotOptions.pie.dataLabels.distance
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/pie-datalabels-distance/
plotOptions: {
pie: {
dataLabels: {
distance: -30,
color: 'white'
}
}
},
Related
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
I have created a graph using highcharts which has 6 series. 3 are column series and 3 are spline series.spline series will collide or go within the column chart so having a requirement to add outline to spline series to have better viewing. Trying to add a border color for the spline series but unable to do. But the same is possible in column chart.If anyone have tried this before for spline series kindly help.
plotOptions: {
series: {
borderColor: '#303030'
}
},
this bordercolor is working for column but not in spline series
column chart
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-bordercolor/
would like to have border for the below series
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-box/
There is no such feature in Highcharts to set line border, but all is not lost.
You can achieve the effect you want, by adding new "fake" series basing on every line series, and set a couple of parameters.
Best place (in code) to do that would be the chart.events.load function, so there just find all series with line type:
chart: {
events: {
load() {
var series = this.series.filter(elem => elem.type === 'line')
}
}
}
Then, iterate on all the series found, and create new one so that it would have color: [color_you_want], the same data and marker.symbol, increased lineWidth as well as marker.radius, won't be accessible by mouse and not visible in legend, just like below:
chart: {
events: {
load() {
var series = this.series.filter(elem => elem.type === 'line')
series.forEach(series => {
this.addSeries({
data: series.userOptions.data,
showInLegend: false,
color: '#000',
enableMouseTracking: false,
zIndex: -9999,
marker: {
symbol: series.symbol,
radius: series.options.marker.radius + 1
},
lineWidth: series.options.lineWidth + 2
})
})
}
}
}
Hope, it helps you.
Live example: http://jsfiddle.net/yw2tb4nm/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.marker.symbol
https://api.highcharts.com/highcharts/series.line.marker.radius
https://api.highcharts.com/highcharts/series.line.showInLegend
https://api.highcharts.com/highcharts/series.line.enableMouseTracking
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
Is there a way to add a second needle of a different colour to a VU Meter ('gauge') style chart in Highcharts? I know that you can change the colour of the needle per chart using plotOptions:gauge:dial e.g.
plotOptions: {
gauge: {
dial: {
radius: '100%',
backgroundColor : 'grey'
}
}
}
and I have tried to overlay a second pane and specify individual plotOptions (as per this fiddle (http://jsfiddle.net/jdalton/xfV5k/8/) but without any success
You can use the same options as in plotOptions directly in series:
series: [{
data: [{y:-6, color: 'red'}],
yAxis: 0,
dial: {
backgroundColor : 'red'
}
}
Example: http://jsfiddle.net/xfV5k/11/
I am having trouble getting the marker radius working with high stock charts. I have been trying to get this working using both plot options, and a setting against the series directly:
plotOptions: {
series: {
marker: {
radius: 90
}
}
},
(or see http://jsfiddle.net/zMH7Q/).
Changing other attributes such as the marker shape works fine, but any changes to the radius seem to be ignored. I have tried setting this in both plot options, and directly against the series but to no avail. It is definately mentioned in the documents (http://api.highcharts.com/highstock#plotOptions.area.marker.radius) so should work unless I am doing something stupid (fairly likely).
Any help would be appreciated :-)
David
In HighStock, unlike HighCharts, the default for marker is enabled: false, this is because the data tends to be very dense and markers wouldn't add much value to the data comprehension of the user.
You need to modify your code to:
plotOptions: {
series: {
marker: {
enabled: true,
radius: 90
}
}
},
for the markers to show up.
EDIT: I will leave the above up in case someone comes across this and needs it. What David really wants to know is whether the series symbol during hover can be changed. The code for that is:
plotOptions: {
series: {
marker: {
lineColor: null,
states: {
hover: {
fillColor: 'white',
radius: 10
}
}
}
}
}
Which is straight from the Highcharts API reference at http://api.highcharts.com/highcharts#plotOptions.scatter.marker.states.hover.radius