I'm trying to show the values of my series data in the highchart legend using this and I've tried pretty much all the examples I can find online, specifically adding:
legend: {
enabled: true,
floating: true,
align: 'left',
verticalAlign: 'top',
y: 35,
labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>',
borderWidth: 0
},
But nothing is working in order to show the values of the data in my highchart and to display the highchart vertically to the right. Can someone please tell me what I'm doing wrong please?
http://jsfiddle.net/tobitobetoby/6druu3a2/3/
Legend options do not apply because you placed them in series object. I corrected the demo and add couple of additional options, like layout.
API Reference:
http://api.highcharts.com/highcharts/legend.layout
Example:
http://jsfiddle.net/1fqvzpdn/
Related
I am working with Highcharts Bar Graph (vertical) and I would like to have the Members data to appear on top of each bar (hovers we will keep as well which is working). I've tried various ways with plotOptions and could not get this to work to show Members data on top of the bar graph view. The first link is my working code.
**https://codepen.io/jenfloods/pen/jOyXEQd**
The second link above is the example is how I would like the data text to appear on top of a bar graph with white shadow letters but this would apply to my vertical bars and not horizontal as this example shows.
**https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bar-datalabels-align-inside-bar/**
Anyone has an example or can work with my code to make it happen?
You need to enable data labels for series and use the configuration like below:
plotOptions: {
series: {
...,
dataLabels: {
rotation: 90,
verticalAlign: 'top',
y: 10,
align: 'left',
inside: true,
enabled: true,
color: '#FFFFFF'
},
}
}
Live demo: http://jsfiddle.net/BlackLabel/y04j6z3m/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.dataLabels
I created a horizontal bar chart w/ chart.js and need to create two set of labels on the y-axis but can only create one.
As an example, see image below, on the y-axis I have a grouping of words 'other' and 'paper' with counts of 2 and 3 respectively; in that grouping and the two below I also need to display the month associated with those two words - like May.
Is there a way to do this?
P.S.
In the image attached I have mirroring set to true but am open to turning mirroring off if the solution will give me the output I need.
So far I have reviewed these pages and tried using the labelString option:
https://www.chartjs.org/docs/latest/axes/labelling.html
Horizontal Stacked Bar Chart with Two Y Axis Issues
Horizontal bar chart in chart.js
Update:
I resolved this issue by using labelString - see chart.js docs for details.
In particular:
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
ticks: {
beginAtZero: true,
display: true,
mirror: true,
},
scaleLabel: {
display: true,
labelString: [
var0+' '+
var1+' '+
var2
]
}
}]
This is a bit of a hack as I needed to add 18 spaces between var0 and var1 but reviewed on multiple devices and it works.
If someone else found a different solution please share. If not, I hope this helps someone.
Image of update below - with months now on the y-axis:
I'm using Highcharts API for one of my project.
I need legends on the right side and chart on the left as in below link. Can anyone have any idea how to do this in Highcharts?
Many thanks in advance.
Please check this image.
Set legend's layout, align and verticalAlign options as follows:
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
itemMarginTop: 10,
itemMarginBottom: 10
},
By itemMarginTop/Bottom you can control the padding between the legend items.
example: http://jsfiddle.net/ca8h5eqz/
Trying to do a simple left alignment for the labels on the x-axis of a stacked bar chart using HighCharts API. No matter what label options I try nothing works.
I tried setting verticalAlignment: "bottom" and useHTML: "true" but depending upon the settings there's always something wrong. Is this a bug in HighCharts?
Here are some examples:
http://jsfiddle.net/ojbbry6c/ Properly left-aligned labels, but for some reason the chart overlaps the labels when set to left alignment?
labels: {
verticalAlign: 'bottom',
align: 'left',
textAlign: 'left',
useHTML: true,
}
http://jsfiddle.net/2rx0zws1/1/ turn off left align and now the chart doesn't overlap, but the alignment is broken.
labels: {
verticalAlign: 'bottom',
//align: 'left',
textAlign: 'left',
useHTML: true,
}
How do you make the labels on the x-axis left-align? For other chart types where the y-axis is on the left it works fine, but stackedbar alignment seems broken.
The comment by #Grzegorz Blachlínski is correct, this was an issue here:
https://github.com/highcharts/highcharts/issues/5286
But it's been resolved in highcharts v6+, and the solution is to use align in conjunction with "reserveSpace". This works:
align: "left",
reserveSpace: true,
I am trying to create horizontal chart with jQplot and tried all the options. However, the bars are overlapping.
Please let me know if I missed anything.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
barMargin: 30,barWidth: 25
}
},
series: series,
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
barMargin: 30
}
}
Check this fiddle here: jqPlot Horizontal Bar Chart
I used the above snippet, and it worked fine for me.
BTW, the series: series isn't defined in the snippet that you provided.
And the bars aren't overlapping in my case. Check the fiddle. Is your code something similar to the one in the fiddle. If not, then please update/post some more code, which will help us investigate the issue.
Hope it helps.