I'm using a custom HTML tooltip with Highcharts and would like to remove the arrow, e.g. see the tiny arrow over the blue bar:
These are my settings for the current tooltip:
useHTML: true,
shadow: false,
borderRadius: 0,
borderWidth: 0,
backgroundColor: "rgba(255,255,255,1)",
style: {
padding: 0
},
shared: true
Use option shape
shape: "square"
Highcharts reference
Related
I'm using highcharts to plot out a line graph of quite a few sections. I want the legend to be static at the bottom of the graph area. The height of the graph area can be fixed but the legends can change dynamically.
I'm using the below options in for legend object
legend: {
useHTML: true,
enabled: true,
reversed: false,
verticalAlign: 'bottom',
floating: true,
align: 'center',
padding: 10,
margin: 20,
itemDistance: 10,
itemStyle: {
'font-size': '14px',
'color': colors.greyDark,
'font-family': fonts.proximaNovaBold,
'letter-spacing': '0',
'line-height': '17px',
'text-align': 'center',
},
itemMarginBottom: 10,
x: 0,
y: 100
},
I have replicated it in the fiddle
https://jsfiddle.net/x496tLmf/1/
Is there any way to fix this and have the legends stuck to the bottom. All of them need to display as the graph will be exported as static image.
There are two main issues why the legend overlaps the chart:
When you manually set the chart margin, the chart won't reserve space for the legend.
When you enable the legend floating option, you explicitly allow legend for overlapping
API: https://api.highcharts.com/highcharts/legend.floating
The solution here is to remove the properties mentioned before and let the chart calculate the position of the legend.
However when you want to export this chart as a static image with all the legend items you have to specify the size of each element together with some overflow style to cut them a bit.
You might also reduce the spacing in between them, to increase the chart area.
legend: {
useHTML: true,
enabled: true,
reversed: false,
itemWidth:120,
itemStyle: {
'font-size': '14px',
'color': colors.greyDark,
'font-family': fonts.proximaNovaBold,
'letter-spacing': '0',
'line-height': '17px',
'text-align': 'center',
"textOverflow": "ellipsis"
},
},
API: https://api.highcharts.com/highcharts/legend.itemWidth
Live demo:
https://jsfiddle.net/BlackLabel/ef8rjkmL/
I'm trying to add a custom label to a highcharts pie chart. The label is going to (eventually) be center, bottom aligned and display some html data. The problem is the label does not show on the chart, trying to use 'renderer'. I'm quite new to highcharts, what am I doing wrong?
$('#div_graph_0_1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
credits: {
enabled: false
},
title: {
text: 'NEW VISITORS'
},
subtitle:{
text: pieSubtitleTotal,
style: { color: '#f07600' }
},
tooltip: {
pointFormat: '{point.y}'
},
plotOptions: {
pie: {
states: {
hover: {
halo: {
size: 9,
attributes: {
fill: '#f07600'}
}
}
},
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
connectorWidth: 0,
enabled: true,
format: '{point.y}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
}
},
series: [{
name: 'New',
colorByPoint: true,
data: [{
name: 'Repeat',
y: subtitleTotal,
color: '#fff',
borderColor: '#f07600',
borderWidth: 2
}, {
name: 'New',
color: '#f07600',
borderColor: '#f07600',
y: pieTotalVisitors,
sliced: true,
selected: true
}]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
function(chart) { // on complete
chart.renderer.text('This text is <span style="color: red">styled</span> and linked', 0, 0)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
}
});
You're on the right track, as your rendered text IS there and present on the chart. What you needed to define was the expected X and Y values where you wanted the text to be placed.
I discovered this because of the "y" in "styled":
If you define a different y value in your renderer.text call, say, 100, you get this:
Here is the syntax you should follow:
chart.renderer.text('Your text', X_VALUE, Y_VALUE)
In my above example, I set your text to:
chart.renderer.text('Your text', 0, 100)
... which puts it 100 pixels down from the top of the chart.
You're going to have to define these values manually; there's no out-of-the-box way to say "bottom-aligned, center-aligned." To make this more versatile, what you could do is capture the height and width of your container div and calculate the x and y values that way.
You can do this by fixing the height and width of your chart in a stylesheet declaration, defining JavaScript variables outside your chart options, and then calling those variables from the renderer.text declaration:
// in your inline stylesheet
#container: { width: '650px', height: '450px' }
// variables defined before your chart options
var chartHeight = $('#container').height();
var chartWidth = $('#container').width();
// in your renderer code
chart.renderer.text('Your text', chartWidth * 0.5, chartHeight - 100)
In the above example, your rendered text would start at 50% of your chart's width and 100 pixels from the bottom of your chart.
One point to keep in mind: you mentioned an HTML table. In that case, I'd suggest switching renderer.text to renderer.html. That will allow many more HTML elements to be rendered in the final chart.
I hope all of this has been helpful!
As you can see in the jsfiddle example, the legend symbol is not aligned with the legend text.
Is there a way to set some padding or margin so the text can be vertically aligned to top or something?
http://jsfiddle.net/daxu/md2zk/62/
legend: {
layout: 'vertical',
itemMarginTop: 20,
symbolHeight: 5,
symbolWidth:5,
itemStyle: {
color: 'black',
fontFamily: 'DINPro',
fontSize: '7.8409px',
fontWeight: 'normal',
display:'inline-block',
verticalalign:'top'
},
align: 'right',
verticalAlign: 'middle',
floating: false,
x: 0,
y: 0
},
You have to set both legend: {useHTML:true, itemStyle: {lineHeight:"10px"}}
The lineHeight will change the text alignment to what you need. it worked in my case for horizontal legend.
See http://jsfiddle.net/md2zk/176/
Set useHTML flag as true in the legend.
Example: http://jsfiddle.net/md2zk/63/
I have a column chart with reversed yAxis:
jsFiddle
dataLabels: {
enabled: true,
color: 'white',
verticalAlign: "bottom",
y: 10,
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
I want to show the data labels inside the column like in the jsFiddle example, but can't set the position to be near the top border like here or above the top border of each column.
How can I achieve it?
You need to set directly options for dataLabels to get them visible, see: http://jsfiddle.net/sX83S/2/
dataLabels: {
...
verticalAlign: "top",
overflow: true,
crop: false,
inside: true,
}
The problem you have is based on fact, that you change start point of yAxis. I don't know is it possible to achieve "top" in your case, because the column's don't have same start points but stop at the same finish point "150". This give something close result, but you should think further:
dataLabels: {
enabled: true,
color: "white",
rotation: -90, //optional
align: "left", // "right" or delete it at all
y:-150, //this is crucial
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
},
So, anyway you should play with y ("y:-50" is the "top" level, "y:-150" is the "bottom" level) and figure out that meaning is different for all columns.
UPD.: As I understand you want to place it right on the edges of each columns, alas I'm not sure is that possible.
How to embedd text of the value on the column bar of the highchart
please see below image for the reference
image http://img16.imageshack.us/img16/1935/nbe1.png
These are added via the dataLabels method. Code would look something like:
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
rotation: 270,
color: 'white',
x: 3,
y: 15
}
}
},