Using Highcharts, I have implemented the basic bar chart and the legend on the bottom of this design. However, I am trying to figure out how to do the circles with the values.
Looking at annotations but this is not next to the point. Or somehow do a second legend?
Any advice on the best approach on this with highcharts would be appreciated.
You can create an annotation in any place on the chart. Example:
annotations: [{
labels: [{
shape: 'circle',
overflow: 'allow',
text: '1',
padding: 50,
point: {
x: 200,
y: 400
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8ucke60o/
API Reference: https://api.highcharts.com/highcharts/annotations.labels.point
Related
I have a Gantt Chart with a Navigator bar at the bottom that look like this:
The image as you can see is hard to read because of the color of the milestones... my question is, how do we get a white border on each of these milestones... I tried on almost everything the docs say, on series, datalabels, etc and I can't make any border show, thank you for any help you may bring.
You just need to specify borderWidth and borderColor properties for the specific data points:
Highcharts.ganttChart('container', {
series: [{
...,
data: [
...,
{
...,
borderWidth: 2,
borderColor: 'black'
}]
}],
...
});
Live demo: https://jsfiddle.net/BlackLabel/xps2d6z3/
API Reference:
https://api.highcharts.com/gantt/series.gantt.borderWidth
https://api.highcharts.com/gantt/series.gantt.borderColor
I am using highcharts polar-spider chart. Is there any way to set color pattern in grid.
There is yAxis.alternateGridColor but i need pattern in color.
Poler chart
Please check below image so you can get idea, What i am talking about.
enter image description here
You can use plot-bands to achieve the required result:
yAxis: {
...,
plotBands: [{
color: 'red',
from: 20,
to: 50
}, ...]
}
Live demo: https://jsfiddle.net/BlackLabel/g62h0apb/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotBands
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 need to display a white line in the middle of the gauge chart like this:
But I can't find a customization option suitable to do that in Highcharts gauge chart. Can anyone please help?
I don't want the "gauge" arrow. I just want the white separator at 50%.
You can add the separator by using plotLines option:
yAxis: {
plotLines: [{
value: 100,
width: 4,
color: '#fff',
zIndex: 4
}],
...
}
Live demo: https://jsfiddle.net/BlackLabel/1mj80dc6/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
I work for a public school system and have been asked to emulate a dashboard like what Atlanta has. It features two charts that are occupying the same plot/chart area. On the left side of the chart is a bar graph, on the right side is what I'm assuming is a scatter graph. The link to this chart is here, the one on the left-hand side:
https://public.tableau.com/views/AttendanceandSuspensions1415/AttendanceDash?:embed=y&:display_count=no&:showVizHome=no#1
Is there a way to do this in Highcharts?
Yes. You can set multiple y axes, and set their positions.
Then you assign each data series to one of the axes.
Example:
yAxis: [{
left: 120, width: 200,
},{
offset: 0,
left: 345, width: 200,
}]
.
series: [{
yAxis: 0,
data: [...]
}, {
yAxis: 1,
type: 'scatter',
data: [...]
}]
Example fiddle:
http://jsfiddle.net/jlbriggs/j0eq21du/