I am using jqplot to display graph sales of month.i used horizontal bar graph for that,i want to display value of each stacked bar within the bar.
I am tried using following code,
this.cfg.seriesDefaults = {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
shadowOffset: 0,
barWidth :'30',
barDirection: 'horizontal',
highlightMouseDown: true
},
pointLabels: {show: true ,
hideZeros: true,
formatString: '%d',
// xpadding : -90
xpadding: 20, ypadding: 50,
// edgeTolerance: -55
location :'w'
}
but it displayed pointlabels within the bar for 1 st stacked region correct value displayed but for last it displayed total of stacked bar.
i want to disaplay each region value within the bar not total.
Related
issue that i am facing is, i have my bar graph made using react-chart-js. i want to remove space between the bar and center align the bar's . The bar's should have Thickness equal to 50
I try using dummy data ,that way i got the desired output but that is not the correct way of doing . Also I try using barPercentage , categoryPercentage option but didnt get the desired output
Link for CodeSandbox
I don't know if this actually works out of the box. There is nothing in the documentation about this use case either.
You could do it with ghost values to extend the chart in general.
This is not really a solution, but it may be an option.
const labels = ["","","January", "February", "March","",""];
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map((elem, index) => {
if (index > 1 && index < 5)
return faker.datatype.number({ min: 0, max: 1000 })
}),
backgroundColor: "rgba(255, 99, 132, 0.5)",
barThickness: 50
}
]
};
I'm trying to draw some text at a particular height (so it's drawn at the same height as some other primitive) in Cesium. Text-wise, I can't seem to be able to draw anything but labels clamps to the ground (in the example below, the first little circle is at ground level). As such:
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(parseFloat(terrain[5]), parseFloat(terrain[4])),
ellipse : {
semiMinorAxis : 10000,
semiMajorAxis : 10000,
height : 1000,
fill : true,
outline: true,
material : Cesium.Color.fromCssColorString(someColour).withAlpha(0.5),
outlineWidth : 2
},
label: {
id: 'my label',
text: "Blabla",
scale: .5,
height: 1000
}
});
Is there any way to draw text at a specific height in Cesium?
The text height needs to be part of entity.position. Try adding it as a 3rd parameter to Cartesian3.fromDegrees on the 2nd line there.
My requirement is to show percentage values on the top of the bar ccc Bar chart (non-stacked), so far I have got the percentages in between the bar charts all I need is to display them on the top.
I have added this function in clickable action and made clickable TRUE
function(scene) { var pctVar = scene.vars.value.percent;
alert(pctVar.label);
}
Then in advance properties I have changed values visible = True and Valuemask= {Value}% so until this I can get values in middle of the bar chart
So what and all I need to do to show the percentages on the TOP of the Bar Charts? Thanks in Advance!
valuesAnchor: Top
Extension points [
label_textMargin: 1
label_textBaseline: bottom
}
I am using morris.js to create bar chart.But the size of bar is too wide.
Can you suggest how can i restrict the bar size?
Using the Java Script Code
var bar = new Morris.Bar({
element: 'bar-chart',
resize: true,
data: [
{y: '2012', a: 100, b: 90}
],
barColors: ['#00a65a', '#f56954'],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['CPU', 'DISK'],
hideHover: 'auto'
});
You can use barSizeRatio to control the width of the bars. So, when you have few bars e.g. less than 5, set barSizeRatio to 0.2. For more than 5 bars, let don't specify barSizeRatio, let the chart control figure it out.
jsfiddle http://jsfiddle.net/bv4xezh7/1/
Morris.Bar({
barSizeRatio:0.2,
element: 'chart',
data: [
{ date: '04-02-2014', value: 3 },
{ date: '04-03-2014', value: 10 },
],
xkey: 'date',
ykeys: ['value'],
labels: ['Orders']
});
You can make it more dynamic by figuring out the width of the chart control and then decide the value of barSizeRatio to meet your maximum bar width criteria.
Using a bar chart: https://developers.google.com/chart/interactive/docs/gallery/barchart when you have a lot of data, it crushes the bars to be very thin and the text to overlap each other. What options are there to get the data to render in the container properly (maybe guarantee each bar to be of a certain height if possible)? I want to avoid explicitly setting the height to say "1000px", then looking at the bar chart to determine whether it is scrunched up or not.
You can calculate a height for your BarChart dynamically, based on the number of rows of data in your DataTable:
// set inner height to 30 pixels per row
var chartAreaHeight = data.getNumberOfRows() * 30;
// add padding to outer height to accomodate title, axis labels, etc
var chartHeight = chartAreaHeight + 80;
var chart = new google.visualization.BarChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: chartHeight,
chartArea: {
height: chartAreaHeight
}
});