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
}
}
},
Related
I have attached the screenshot to show the dash line in left side of the chart. It would be helpful if we can achieve the functionality and I tried to increase the width of the border, it is visible slightly. Do you have any proper approach to achieve this?
Code Snippet :
Highcharts.chart('container', {
chart: {
type: 'bar',
charWidth: 520,
chartHeight:300,
margin: [70,0,0,0]
},
xAxis: {
categories: ['Jan'],
visible: false
},
yAxis: {
min: 0,
visible: false
},
plotOptions: {
series:{
stacking:'normal'
},
dataLabels: {
enabled : false,
}
},
series: [{
name: 'John',
data: [{
y: 15
}]
}, {
name: 'Jane',
data: [{
y: 22
}]
}, {
name: 'Joe',
data: [{
y: 33,
}]
}, {
stacking: false,
data: [55],
grouping: false,
dashStyle:'ShortDash',
color: 'transparent',
borderWidth: 2,
borderColor: 'red',
}]
});
Thanks for the response
[![enter image description here][2]][2]
The left side of the bar is connected to the xAxis, which makes the left border less visible. There are some possible solutions to this issue.
You can set the minimum value of the xAxis to -0.1 and set startOnTick property to false. Then the left border is visible (it's not directly connected to the axis).
Demo:
https://jsfiddle.net/BlackLabel/pqy84hvs/
API references:
https://api.highcharts.com/highcharts/xAxis.startOnTick
https://api.highcharts.com/highcharts/xAxis.min
yAxis: {
min: -0.1,
visible: false,
startOnTick: false
}
You can set the borderWidth property to 3. Then the border is visible.
Demo:
https://jsfiddle.net/BlackLabel/01m6p47f/
API references:
https://api.highcharts.com/highcharts/series.bar.borderWidth
{
name: 'Joe',
borderWidth: 3,
borderColor: 'red',
data: [{
y: 33,
}]
}
You can also use SVG Renderer and render the border yourself.
Docs:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Example demo of using SVG Renderer:
https://jsfiddle.net/BlackLabel/2koczuq0/
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 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!
I am using highcharts to display data in my rails app. A picture speaks a thousand words...
Basically I am trying to get the y axis labels to be the bar chart datalabels and concatenate with the value....
So for the first bar, the datalabel would be "idiopathic pulmonary fibrosis 37"
The chart is being passed a variable "data" which is an array of objects that you can see in the console (5 objects in total with the attributes, count, name and y).
My plot option set up is this:
plotOptions: {
series: {
dataLabels: {
format: '{x}',
enabled: true,
align: 'right',
color: '#294469',
shadow: false,
x: -25,
style: {"fontSize": "10px", "textShadow": "0px" }
},
pointPadding: 0.1,
groupPadding: 0
}
},
I can replace the format with '{y}' and that give me the value, but I can't get the string in there. Any thoughts....
You need to use formatter function for datalabels.
dataLabels:{
enabled: true,
formatter: function () {
return this.x +" "+ this.y;
}
}
See Demo here
This is what worked.
dataLabels: {
formatter: function() {
return data[this.x].name + " " + data[this.x].y;
},
enabled: true,
align: 'right',
color: '#294469',
shadow: false,
x: -10,
style: {"fontSize": "10px", "textShadow": "0px" }
}
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/