I'm working chartjs bar chart, i need to align the legend to left side, i tried position: "left" but it moves chart to the right
is there any other way to position the legend to left ?
legend: {
position: "left"
},
Try this!
legend: {
display: true,
position: 'left',
}
Related
Trying to solve this problem for several hours, but have not found any solutions.
screenshot
For x-axis this adds only vertical padding. But how I can move tick values horizontally to the left?
options: {
scales: {
xAxes: [{
ticks: {
padding: -15
}
}]
}
}
You can define offset: true on the x-axis as follows:
options: {
scales: {
xAxes: [{
offset: true
}]
}
}
offset: If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true for a bar chart by default.
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.
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);
How do I remove the white border around the vAxis textPosition 'in' text style on Google Charts Bar Chart?
My styling looks like this:
vAxis: { 'textPosition': 'in', 'textStyle': { color: 'black', 'stroke': 0 } },
I would like to have no surrounding white area around the black text within my coloured bars.
See this link: https://developers.google.com/chart/interactive/docs/gallery/bubblechart
Notice how the Bubbles have text inside them with a white border around them. I want to remove this border so that the black text sits directly over the bubble colour with no border around the black text.
I have tried lots of combinations such as:
'textStyle': { color: 'black', 'stroke': 0 }
'textStyle': { color: 'black', 'strokeWidth': 0 }
'textStyle': { color: 'black', 'border': 0 }
'textStyle': { color: 'black', 'border': 'none' }
Nothing I have tried makes any difference. I still have the white border around the text.
There is an undocumented 'auraColor' option that applies to several, if not all, 'textStyle' options. For example,
textStyle: { auraColor: 'white' }
Setting it to 'none' will remove it.