for one value the bar width is width of canvas so i want only to change the width of bar
how to fix the width of bar size ?
Check this out
barThickness
Manually set width of each bar in pixels. If not set, the base sample
widths are calculated automatically so that they take the full
available widths without overlap. Then, the bars are sized using
barPercentage and categoryPercentage.
Your code should be something like this:
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [{
barThickness: 10
}]
}
});
I made this example for you
Solution
You can set it on the Chart object
import {Chart} from "chart.js"
Chart.defaults.datasets.bar.barThickness = 73;
//also try barPercentage, maxBarThickness
Related
I'm trying to use highcharts xrange to display a large number of categories (>20).
currently, I can show the data, but the categories are automatically resized so that they fit the height of the chart
What the client wants is to
a. configure the height of the categories to absolute size
b. display a vertical scrollbar
Is this possible?
Thanks,
Nadav
You can use scrollablePlotArea and dynamically calculate the minHeight property. For example:
chart: {
events: {
load: function(){
var categoryWidth = 50,
points = this.series[0].points;
this.update({
chart: {
scrollablePlotArea: {
minHeight: this.chartHeight - this.plotHeight + categoryWidth * points.length
}
}
}, true, true, false);
}
},
}
Live demo: http://jsfiddle.net/BlackLabel/5qp7rv1j/
API Reference:
https://api.highcharts.com/highcharts/chart.scrollablePlotArea
https://api.highcharts.com/class-reference/Highcharts.Chart#update
I'm using Chart.js v1.0.1-beta.3. I'm creating an interactive bar chart where users can click on a bar to increase the value of that bar.
By default, the histogram begins with empty values. The y-axis in that case defaults to a [0,1] scale. When users start adding data to the histogram, the y-axis maximum changes to adjust, which causes a jarring shift in the appearance of the graph at low values.
I'd like to have the y-axis default to, say, a [0,10] scale even when no data is entered. This StackOverflow question is the most relevant info I can find on how to address problems like this; the best solution on that page is to use the 'suggestedMax' parameter in the chart options:
scales: {
yAxes: [{
ticks: {
suggestedMax : 10
}
}]
},
although this might apply only to v2+ of the library, it's hard to tell. In any event, this doesn't work, and the y-axis defaults to [1,0] when there's no data. I've also tried every combination of every other suggestion on that page, including
using scaleOverride : true, display : true, setting explicit min and max parameters within 'ticks', scaleBeginsAtZero : true, beginAtZero : true, and scaleStartValue : 0,
If I try to upgrade to the most current release, v2.7.3, the charts don't appear on the rendered page at all. I don't have the time or inclination to debug what's happening there, so I'm stuck with v1.0.1.
How do I have a bar chart default to a suggested maximum in this version? Is it even possible?
Looking through the documentation included with v1.0.1 (zip file), there doesn't appear to be a way to do this. I can't see any option to set the scale values.
In v2.7.3 this is quite simple. A working example is below. The chart starts empty, with a y-axis scale from 0-10. Clicking 'Add Series' adds a new bar with a value of 5. Clicking a bar increments value by 1.
let btn1 = document.getElementById('add'),
canvas = document.getElementById('chart'),
chart = new Chart(canvas, {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
suggestedMax: 10
}
}]
}
}
});
canvas.addEventListener('click', function(e) {
let idx = chart.getDatasetAtEvent(e)[0]._datasetIndex;
chart.config.data.datasets[idx].data[0]++;
chart.update();
});
btn1.addEventListener('click', function() {
chart.config.data.datasets.push({
data: [5]
});
chart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="add">Add Series</button> Click a bar to increment its value by 1.
<canvas id="chart"></canvas>
My Morris JS chart is not rendering well inside a bootstrap column, like the documentation tells I gave width and height attributes to the container but the chart is not obeying them.
Does someone have a clue to fix it?
var graficoCampanhaefbe = Morris.Bar({
element: 'graficoCampanhaefbe',
data: [{"nome": "Redes Sociais 1459", "destinatarios": "2", "abertos": "4", "clicados": "2", "capturados": "3"}],
barColors: ['#00A5DB','#6EA700','#FFB203','#B50000'],
xkey: 'nome',
ykeys: ['destinatarios','abertos', 'clicados', 'capturados'],
labels: ['Destinatario','Abertos', 'Clicados', 'Capturados'],
hideHover: 'always'
});
When I set resize: true and resize the window the graphic renders just perfect.
In your $(document).ready, try to trigger a window resize after you initialized your Morris Bar and set your resize Morris Bar parameter to true:
$(document).ready(function () {
var graficoCampanhaefbe = Morris.Bar({...});
//graficoCampanhaefbe.redraw(); //if needed
$(window).trigger('resize');
});
You should add class="col-xs-12" to the chart or it's container.
You have not specified a HTML snippet, but it should be the element on which you cast the chart.
I want to show a long pie chart (vertical) not the default (Horizontal)
so I set dataLabels of every data , to move the position to label
but seem like a bug or something , it didn't work
or maybe have another way to do this?
I am very need to solve this issue
very thankful
here is my code:
http://jsfiddle.net/arhspt8011/Jgrdz/1
data: [
{
name:'Label1',
y:50,
dataLabels:
{
ebabled:false,
y:-200
}
},
{
name:'Label2',
y:50,
dataLabels:
{
ebabled:true,
y:-200
}
},
{
name:'Label3',
y:50,
dataLabels:
{
ebabled:true,
y:200
}
}
]
the y of dataLabels didn't work OTZ
You can increase width of chart, add spacingLeft / spacingRight, reduce chart size by "size" paramter. In case when you would like to have vertical datalabels, your can try to useHTML / formatter.
I'm using Highcharts to create some vertical bars (a.k.a. "column charts") a lot like here: highcharts.com/demo/column-basic
Thing is, sometimes there are 30 bars in the chart, sometimes only two. Where then are two really wide bars in the chart, it looks really weird, so the decision was made to set a maximum width for the bars. That way if there are only two then they wouldn't get wider than, say, 50px, but if there were 50 then Highcharts could size them in the way it sees fit.
So my problem is that Highcharts doesn't have a way to explicitly set the maximum width of the columns. Has anyone found a solution to that?
Obviously this question was asked a long time ago when this feature didn't exist, but as of Highcharts 4.1.8 you can do this without any workarounds using the plotOptions.column.maxPointWidth setting:
$('#container').highcharts({
/* Other chart settings here... */
plotOptions: {
column: {
/* Here is the setting to limit the maximum column width. */
maxPointWidth: 50
}
}
/* Other chart settings here... */
});
Below is the JSFiddle of the basic column chart example, modified to show this working:
http://jsfiddle.net/vu3dubhb/
And the documentation for this setting is here: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth
Update: As of Highcharts version 4.1.8 , see Adam Goodwin's answer, below.
For many years, the only way to set the maximum width of the columns, was dynamically via JavaScript.
Basically:
Check the current bar width.
If it is greater than desired, reset the series' pointWidth.
Force a redraw to make the change visible.
Something like:
var chart = new Highcharts.Chart ( { ... ...
//--- Enforce a Maximum bar width.
var MaximumBarWidth = 40; //-- Pixels.
var series = chart.series[0];
if (series.data.length) {
if (series.data[0].barW > MaximumBarWidth) {
series.options.pointWidth = MaximumBarWidth;
/*--- Force a redraw. Note that redraw() will not
fire in this case!
Hence we use something like setSize().
*/
chart.setSize (400, 300);
}
}
See the demo at jsFiddle.
Ultimate solution is to wrap drawPoints and overwrite shaperArgs of each point, especially x-position and width:
(function(H) {
var each = H.each;
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
var series = this;
if(series.data.length > 0 ){
var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
each(this.data, function(point) {
point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
point.shapeArgs.width = width;
});
}
proceed.call(this);
})
})(Highcharts)
Use:
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
maxPointWidth: 50,
data: [ ... ]
}]
});
And live demo: http://jsfiddle.net/83M3T/1/
a better way would be has suggested
http://highcharts.uservoice.com/forums/55896-general/suggestions/2079099-manually-set-the-column-width
check this fiddle
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-pointwidth-20/
just add
series: {
pointWidth: 20
}
in you plot options and thats it . :) enjoy cheers ...
function(chart){
var series = chart.series[0];
//--- Enforce a Maximum bar width
if (series && series.data.length) {
if (series.data[0].pointWidth > MaximumBarWidth) {
for(var i=0;i< chart.series.length;i++)
chart.series[i].update({
pointWidth:MaximumBarWidth
});
}
}
}
http://jsfiddle.net/pXZRV/40/
I used the spacingTop attribute to enforce a maximum pointWidth on a bar chart:
if (series[0].data[0].pointWidth > maximumBarWidth) {
this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
this.isDirtyBox = true;
this.redraw();
}
So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.
This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.
You could do the same with spacingRight and would have a consistent Chart without ugly spaces between the bars.
In my case, setting pointRange to 1 was what I needed. If a category with a box was adjacent to a category without a box (only outliers in a scatter series) the box would be wider than the category.
There is a good explanation here.
I faced the same issue using HighCharts and this is how I fixed it !!
-- Create a wrapper div for the chart, with some minimum width and overflow:auto. (To enable horizontal scroll)
-- Set the "pointWidth" of each bar to the required value. (say, pointWidth: 75)
-- Now set the chartWidth dynamically, based on the number of bars.
Use chartWidth = (number of bars) * (pointWidth) * 2
So, if you have 15 bars, chartWidth = 15*75*2 = 2250px, where 2 is used to create larger chart width, to accommodate spacing between bars.
--In this manner, You can have any number of bars of same width in the scrollable chart ... :)