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.
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 am setting up range slider in my angular project. The all values for range slider is coming from api.Api response for slider is looking like this.
[{
toolValue: { defaultvalue: 120,
min: 30,
max: 120,
step: 30 }
}]
I am setting up these values in range slider and the slider is working but when step value is 30 or any other then the slider is not going to max position, instead of it is setting up at position 90. But when the steps are 0.1, that time slider is set to max position . I don't know what wrong with steps.
Html code:
<input type="range" class="slider" [value]="item.toolValue.defaultvalue" [min]="item.toolValue.min" [max]="item.toolValue.max" [step]="item.toolValue.step" id="rangeslider{{index}}" (mouseup)="onMouseupRangeslider($event.target.value,item,index)">
Please let me know how to
As you can see in the upper image, From API in both slider the default value is coming 100 and 120. In first slider steps are 0.1, so that it's going to max position but in the second slider, steps are 30 so that the slider is not going to max position, instead of it is stopped at 90. Please help me with this issue. Thank you
The api response for slider values are as per below.
[{
cols: 12
id: "dvetool0"
rows: 3
toolValue: {defaultvalue: 100, max: 100, min: 0, step: 0.1}
type: "rangeslider"
x: 0
y: 0 },
{
cols: 11
id: "dvetool1"
rows: 3
toolValue: {defaultvalue: 120, max: 120, min: 30, step: 30}
type: "rangeslider"
x: 0
y: 4 }]
Updated Answer:
To follow up after your clarification, I think your problem is the use of the [value] DOM property here. Instead, try tracking the value with ngModel instead.
Replace [value]="default" with [(ngModel)]="inputValue" and create the inputValue variable in your component.ts
Here's a working stackblitz as an example: https://stackblitz.com/edit/angular-szdxyn
By the way, the reason you were seeing 90 is because the browser calculates a a default value using rangeElem.min + (rangeElem.max - rangeElem.min)/2. See the MDN page: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#Value
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.
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.
Even if the bars have value of zero in bar chart created using chartjs, they still show a visible bar. This is misleading for my purpose and I would like to have it removed and show nothing there (meaning that, I still want to show labels with zero value but not the bar). I tried changing min value of y-axis but it doesn't make a difference. The image below shows this problem for columns 56, 60 and 78. Is there a way to get rid of this? Thanks!
And here is my script:
<div>
<canvas id="canvas_bar" height="250", width = "300" ></canvas>
</div>
<script>
var barChartData = {
labels : [56, 60, 78, 90],
datasets : [
{ fillColor : "rgba(139,0,0,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
data : [20.0, 0, 0, 50] },
{ fillColor : "rgba(1,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
data : [0, 0.0, 40.0, 10] }
]
}
window.onload = function(){
var ctx = document.getElementById("canvas_bar").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
animation: false,
responsive : false,
barValueSpacing : 15,
scaleShowVerticalLines: false,
});
}
</script>
By default the barStrokeWidth value is 2.
Just add this :
barStrokeWidth:0,
or :
barShowStroke : false,
In your options.
http://www.chartjs.org/docs/#bar-chart-chart-options
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
update December 2021:
barStrokeWidth is deprecated.
I used inflateAmount: 0 (default value is auto) and it fixed the issue for me
docs: https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties
if barShowStroke : true
not working try to
barRadius: 0
I found that you can add skipNull property to dataset objects. And bars where value is null or undefined won't take any space.
https://www.chartjs.org/docs/3.2.0/charts/bar.html