I have set the width of my bar chart to 580px. The problem that the chart overflows the area in the view window. Would it be possible to reduce the size of the columns in the chart area to reduce the overall chart size? I mean would it be possible to change the scale for the numbers per pixel for each column so that for example the 280 number is shown in less pixel space?
You can use responsive BarChart.
var options = {
width: "100%", //adjusts according to the screen size
height: 500,
bar: { groupWidth: "75%" },
legend: { position: 'right', textStyle: { color: 'black' } },
isStacked: true,
vAxis: { textStyle: { color: 'black' } },
hAxis: { textStyle: { color: 'black' }, format: ' #,##0.00' },
chartArea: { width: "50%", height: "70%" }};
function resizeCharts() {
// redraw charts, dashboards, etc here
chart.draw(dadosGrafico, options);}
$(window).resize(resizeCharts);
Related
I created a donut chart but its width of data area and label area is not what I intended.
How can I increase the width of data(chart) area - i.e. 60% and decrease the width of label area proportionately?
image link as below
https://i.stack.imgur.com/dsoT3.png
<div style="text-align: center;" class='sector-exposure'>
<canvas
baseChart
[data]="sectorChartData"
[labels]="sectorChartLabels"
[chartType]="exposureChartType"
[options]="exposureChartOptions"
>
</canvas>
</div>
public exposureChartOptions: ChartOptions = {
legend: {
position: right,
labels: {
fontColor: '#d5d6d6',
fontSize: this.isMobileWidth ? 10 : 16,
},
},
};
[1]: https://i.stack.imgur.com/dsoT3.png
May be following settings will work for you. Set responsive to true and maintainAspectRatio to false in the chart options and set style as like as max-height: 300px (more or less); width: auto; in canvas.
...
var config = {
type: 'doughnutLabels',
data: {
...
},
options: {
...
responsive: true, //IMPORTANT
maintainAspectRatio: false, //IMPORTANT
...
legend: {
...
position: 'right',
...
labels: {
...
fontColor: '#d5d6d6',
fontSize: this.isMobileWidth ? 10 : 16,
...
}
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
...
same data are used to draw line chart and bar chart. it works fine for drawing line. but there is an error for drawing bar chart. the error is "a.getTime is not a function×". any suggestions are appreciated.
here is my code:
datasource.addColumn('date', 'Date');
datasource.addColumn('number', 'quantity');
datasource.addColumn('number', 'quantity');
datasource.addColumn('number', 'quantity');
for (n = 0; n < tem.length; n++) {
datasource.addRows([[new Date(tem[n][0]), tem[n][1], tem[n][2], tem[n][3]]]);
}
*********line chart ***********
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var options = {
actions: ['dragToZoom', 'rightClickToReset'],
interpolateNulls: true, //bypass null
legend: 'none',
crosshair: { trigger: 'both', opacity: 0.5 }, // Display crosshairs on focus and selection.
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: 'red' }, format: "YY.MM.dd", slantedText: true, slantedTextAngle: 30 },
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: maxy,
min: 0
}
},
explorer: { axis: 'horizontal', maxZoomOut: 1 } //wheel zoom
};
chart.draw(datasource, options);
***********bar chart*************
chart = new google.visualization.BarChart(document.getElementById('chart_div'));
var options = {
title: 'Company Performance',
hAxis: { title: 'Number', titleTextStyle: { color: 'red' } },
vAxis: { minValue: 0 },
explorer: { axis: 'horizontal', maxZoomOut: 1 }
};
chart.draw(datasource, options);*
Requirement: I am working with chart.js. In Bar chart, I want to fix the height of Y-Axis. Is there any attribute or hack to do this?
If you want to control the height of the chart you can change the height of the canvas
<canvas id="statement" height="100px"></canvas>
or if you want to change the height of y-axis values try below. Below will make sure the maximum size of the bar is at 25000,and each step to be at 5000 and the callback will label each as 5k,10k,15k,20k,25k
var chartConfig = {
type: 'bar',
data: data,
options: {
scales: {
yAxes: [{
display: true,
gridLines: {
color: "rgb(210,210,211)"
},
ticks: {
max: 25000,
min: 0,
stepSize: 5000,
beginAtZero: true,
padding: 20,
callback: function(value, index, values) {
return value / 1000 + "k";
}
}
}]
}
}
I created a simple ColumnChart. Is there a way to change the font color globally (through options)?
I would like to change the color of the X and Y axis text. I was able to change the font, the background color, etc. but not the font color.
This is what I have so far:
var options = {
backgroundColor: '#f1f1f1',
fontName: 'Segoe UI'
};
chart.draw(data, options);
Thanks in advance.
There is no global font style option. You have to set the styles on each element separately:
chart.draw(data, {
titleTextStyle: {
color: 'red'
},
hAxis: {
textStyle: {
color: 'red'
},
titleTextStyle: {
color: 'red'
}
},
vAxis: {
textStyle: {
color: 'red'
},
titleTextStyle: {
color: 'red'
}
},
legend: {
textStyle: {
color: 'red'
}
}
});
If you wish to, you can make a feature request to add support for a global font style.
There's no solution within the google charts API that I know of. I use a workaround in JQuery that I run after the chart is rendered:
$.each($("text"),function(index, value) {
$(this).attr("fill","#ffffff");
$(this).attr("font-family","cursive");
})
If you need to globally change the background of all charts on the page, you can use:
$.each($("rect"),function(index, value) {
console.log(this);
if($(this).attr("fill") == "#ffffff")
$(this).attr("fill","#000000");
})
This works by finding any white rectangle and changing it's fill attribute to black.
You may need to tweak these to make sure they only impact your chart and not other elements of the page.
Working with a Google bar chart, here is what I got:
Here my custom options
var options = {
width: 500, height: 240,
legend : 'none',
vAxis:{title:'Answers',textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
hAxis: { title: 'Percentage', textStyle: { color: '#005500', fontSize: '12', paddingRight: '100', marginRight: '100'} }
};
Can't I set a width for these <g> / <rect> tags?
I believe the chartArea.left option is what you are looking for. Try something like this, and mess around with chartArea.left and chartArea.width values (should add up to your total width of 500 though) until your y labels are all visible:
var options = {
width: 500, height: 240,
legend : 'none',
vAxis:{title:'Answers',textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
hAxis: { title: 'Percentage', textStyle: { color: '#005500', fontSize: '12', paddingRight: '100', marginRight: '100'} },
chartArea: {left:100, width: 400}
};
chartArea width can be set in percentage. chartArea: {width: 50%}. This will leave up to 50% of the total chart width to the left column.