There is an interactive box which can toggle (show or hide) specific metrics in the chart.
It is currently blocking the chart and looks very ugly. How do I move it to the bottom of the chart?
You are looking for legend options. Make sure that the properties are defined as below:
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'vertical'
}
Live demo: http://jsfiddle.net/BlackLabel/Ly8x15wt/
API Reference: https://api.highcharts.com/highcharts/legend
Related
What I'm after is showing only the colors of the series in the legends and hiding all the text while keeping the title in the series data so it would come in the tool tip.
Through using labelFormatter this (fiddle) is the closest I got to doing it, when I remove the text however it allows the legends to overlap.
Eventually, just showing the colors of the legends and not the legends' text itself is the result I'm after, i.e:
Set,
itemStyle: {
display: 'none',
}
and remove
layout: 'vertical',
DEMO
I am new to Highcharts, but I feel it is so powerful and like it very much.
I am doing a multiple series chart. Here is what I have for the legend:
legend: {
enabled: true,
verticalAlign: 'bottom',
align:'center',
}
But I got too much space above and below the legend. See the picture. How can I reduce it?
Update
It seems I can use positive y value in
legend { y: number }
to move legend down, but I cannot seem to be able to reduce the space above the legend. I tried padding and margin without any success.
Thanks and regards.
Use the chart.marginBottom instead
chart: {
marginBottom: 60
}
#jsFiddle to demonstrate margin between chart and legends
If real estate is a concern, also evaluate the option of the making the legends floating
Is there any way to draw icon/images/triangle anything inside the chart plot?
Like that image, this example, check the green triangle (the red mark is just to show). Is there any way to draw something like that inside?
I tried to using the legends, but it's kind hard to add a new one just for it.
Thanks
Edit:
I tried using the API, but if I resize the page, the chart resize and the the image stays on the same, that's not good at all, I would like the image to remain on the side of the chart. Like the legend.
Does anyone know nice solution for it?
Use either labels or Renderer.
Add the following code at the end:
, function (chart) {
chart.renderer.text('▲', 0, 0)
.attr({
align: 'right',
zIndex: 8
})
.css({
color: '#73903B',
fontSize: '48px'
})
.add()
.align({
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: -40
});
});
DEMO : http://jsfiddle.net/2PNCG/ (Fixed position when resize, bottom right / lower right)
Reference:
http://code.highcharts.com/highcharts.src.js (credits part)
Other possible approaches:
Use chart.plotWidth, chart.plotLeft, chart.plotHeight with marginRight
Use left, top in labels
Related Questions:
Adding a line of words towards the bottom of chart (Bottom Left / Lower left)
How do you add text to the bottom center of legend and bottom center of chart under legend? (Bottom center)
Highcharts - change font size of text on chart (Fixed position)
Move images rendered on highcharts on resize (Fixed position)
This is the kind of thing easily found in the API.
I have a Highcharts line graph and I'm considering adding dataLabels to each point. According to the API documentation, you can change the vertical placement via verticalAlign, but it doesn't seem to work.
I tried editing the jsfiddle of the basic line graph to include this:
plotOptions: {
line: {
dataLabels: {
enabled: true,
verticalAlign: 'bottom'
},
enableMouseTracking: false
}
},
While the dataLabels are enabled, the vertical position doesn't change regardless of what I put for the verticalAlign value. Anyone had this issue with line graphs?
As Sebastian pointed out in the comment above, verticalAlign does seem to work but it's inverted. Per the head Highcharts developer, this is expected behavior and won't change (includes detailed explanation): https://github.com/highslide-software/highcharts.com/issues/1554
I need to use the pagination of Highcharts (v2.3.5) legend, as my graph use numerous series of data. The thing is I would like to add an image (with a dedicated tooltip) on each legend item, and so use the useHTML property to enable the use of more complex label formats.
The problem is that in that case, the legend overflows the usual frame and goes over the navigation buttons, thus making them unusable. You will find a simple example of this problem here : http://jsfiddle.net/APtZ3/190/
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
labelFormatter: function () {return '<span>' + this.name+'</span>';},
useHTML:true
},
Please let me know if anybody can help me on this.
Note: the problem was to be solved with highcharts new version, but it was not (see http://dev.highslide.com/forum/viewtopic.php?f=9&t=22192&p=86900&hilit=legend+navigation#p86900 )