JqPlot Horizontal Bar Overlapping - javascript

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.

Related

Chart.js Labelling - Need Two Labels on Y-axis of Horizontal Bar Chart

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:

Why won't the legend in my highchart show values?

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/

how to make highcharts pie datalabels always in center of each slice?

I really want to know how to make datalabels always in center of each slice in pie chart.
The normal state look like this(you can also see this example here)
$('#container').highcharts({
chart: {
type: 'pie'
},
plotOptions: {
pie: {
center: ["50%", "50%"],
dataLabels: {
distance: -50
}
},
series:{
events:{
load:function(){
console.log(this.chartWidth, this.chartHeight);
}
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
But, when I decrease the width or height of this chart, datalabels combined, which look like the image below. I think it is the problem of distance property. I've tried to change distance dynamically but failed.
As a result, what I want to do is to locate datalabels always in center of the each slice even decreasing/increasing chart size.
This is a tough one. From my experiences, there's not (currently) a way to explicitly center the labels directly in the middle of each pie slice. I've tried positioning the labels as you did in your example with the same (unsatisfactory) results, especially in smaller browser windows.
I'd recommend either using a legend to show the categories/types in your pie or consider using a stacked bar chart instead (see http://www.highcharts.com/demo/bar-stacked).
I hope this is helpful!

How do I get labels on Pie Chart Wedges in Kendo UI

http://jsfiddle.net/XPK3f/
I am looking to add the wedges of Pending Issued Closed actually on the wedges.
I believe the changes need to be made in one of these objects.
seriesDefaults:
labels:
visible: true,
template: "${value} ${category}",
series:
type: "pie",
data: dataSet
Here is an example of how the series will have labels in the actual chart and not just on the legend. Please see the JSFIDDLE for details.
Thanks!
pie chart http://www-958.ibm.com/software/data/cognos/manyeyes/images/pie-chart.gif?1292295884
I'm not 100% sure what you are asking, but yes, using a template inside the series-defaults labels, you can put pretty much whatever you need as the label.
seriesDefaults: {
labels: {
visible: true,
template: "${category} - ${value} clients"
}
}
http://jsfiddle.net/XPK3f/2/

How replicate the value of Y Axis on both sides of the axis in Highcharts

I need only replicate the value of Y axes on both sides os the axis. Note that my chart DOES NOT have multiple axes.
Look the example: [http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/]
I know it's something simple, but I could not find the solution.
Please guide me. Thanks in advance.
You still need to specify multiple axes, and then you can use the 'linkedTo' and 'opposite' properties:
yAxis: [{
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},{
linkedTo:0,
opposite:true
}],
.
Edit for clarification based on comment below:
Highstock, at the time of this writing, sets the opposite property as true for the yAxis by default.
However, Highstock is not a "version of Highcharts".
Highstock is its own product, originating from and related to Highcharts.
All versions of Highcharts currently set opposite to false both axes by default - yAxis will be on the left, and xAxis will be on the bottom.

Categories

Resources