How could i achieve to align the data labels on the same vertical line in Highcharts bar charts as showned in the example below?
You need to set:
plotOptions: {
bar: {
dataLabels: {
enabled: true,
inside: true,
align: 'left',
x: 390 //offset
}
}
},
Demo: http://jsfiddle.net/5aF54/1/
Related
I am new to highcharts. Is there anyway I can achieve kind of chart functionality using highcharts in which series label are on top and y axis is drawn vertically as shown in this image
Chart
You just can build a chart with multiple y-axes and enabled inverted option:
chart: {
inverted: true
},
yAxis: [{
opposite: true,
width: '40%'
}, {
offset: 0,
opposite: true,
width: '50%',
left: '50%'
}]
Live demo: http://jsfiddle.net/BlackLabel/4eow5np2/
API Reference: https://api.highcharts.com/highstock/chart.inverted
I am trying to find a solution where I am able to set images on the top of each bar. At the moment I didn't found the solution yet.
I tried:
To set the images by adding a new serie of type 'scatter' with the same value as the bar chart serie and a marker with the image as symbol. But if I have multiple series of type 'bar' the points of the scatter serie are set in the middle and not on the top of each bar. I also want to keep the grouping if series are linked to the same category.
const weather_serie = {
type: 'scatter',
data: this.visualisationService
.generate_serie(this.categories[elem], weather, this.period)
.map((val, index) => {
if (val.hasOwnProperty('weather')) {
return {
y: isNaN(visit_serie.data[index])
? 0
: visit_serie.data[index],
marker: {
symbol: 'url(https://openweathermap.org/img/w/${
val.weather
}.png)'
}
};
} else {
return NaN;
}
}),
enableMouseTracking: false,
showInLegend: true
};
To set the images by adding the datalabel and format it inside the chart options. But I didn't found how to set unique images linked to the correct bar chart inside the same category. Some other remarks are that the image is not in the middle of the bar (Starts from the bottom left of the image) and when hovering the tooltip is shown behind the image.
plotOptions: {
bar:{
dataLabels: {
align: 'center',
enabled: true,
useHTML: true,
formatter: function() {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> ';
}
}
}
In the first case, you should disable grouping on series:
plotOptions: {
series: {
grouping: false
}
}
Live demo: http://jsfiddle.net/BlackLabel/v7qx1s5u/
In the second case, you can define individual data label for point:
series: [{
type: 'column',
data: [{
x: 0,
y: 1,
dataLabels: {
align: 'center',
enabled: true,
useHTML: true,
formatter: function() {
return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img>';
}
}
},
[1, 2],
[2, 3]
]
}]
or in formatter function define some rules where the data label should be some image:
dataLabels: {
align: 'center',
enabled: true,
useHTML: true,
formatter: function(){
if (this.point.index === 1){
return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img> ';
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/72Lahvp4/
I'm trying to align a legend at the bottom right in highstock. It used to work until I was forced to upgrade to highstock 1.3.4.
The problem is that now the navigator is covering the legend. This is not ideal:
http://jsfiddle.net/sy8dE/
I'm aligning the legend as follows:
$(function () {
$('#container').highcharts('StockChart', {
chart: {
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align: 'right'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
How can I get the navigator to NOT cover the legend?
In addition to specifying the alignment of the legend, you can also offset it using x and y offsets. For instance, in your case you could move it down a bit like this:
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:40
},
http://jsfiddle.net/kqvNJ/
The other legend options are specified here: http://api.highcharts.com/highcharts#legend.y
Is it possible to hide the yaxis and the series with klick on a series in the legend?
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
cheers
You need to use showEmpty as false.
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
}
}
},