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";
}
}
}]
}
}
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
}
}
};
...
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.
I'm using ChartJS with the plug-in ChartJS DataLabels to show text values right next to the points (who would have thought that a plugin is necessary for this basic task, but I digress).
My issue I need to vary the color of my text labels along with the individual dataset. But so far I haven't found a solution. I'm adding new datasets dynamically, they're not statically pre-loaded. The color should match the color of the dataset.
Suppose I have
var colorpalette = ["red", "blue", "green", "magenta", "yellow", "brown", "purple", "orange", "black", "gray"];
var currseriesnum = 0;
var chart = null;
function setUpChart() {
var ctx = document.getElementById('chartArea').getContext('2d');
chart = new Chart(ctx, {
type: 'line',
data: {
labels: monthnames,
datasets: [] // Initially blank - series added dynamically with chart.update()
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
plugins: { // ChartsJS DataLabels initialized here
datalabels: {
anchor: 'end',
align: 'bottom',
formatter: Math.round,
font: {
weight: 'bold',
size: 16
},
color: colorpalette[currseriesnum] // Pick color dynamically
}
}
}
});
}
Doesn't work. Also tried a function, color: function(context), but unsure how to retrieve the current index of the dataset I'm getting here.
I'm adding series to the chart dynamically (initially empty) as below, and incrementing the global var currseriesnum.
chart.data.datasets.push({
label: keyValueSelection.label,
fill: false,
data: keyValueSelection.value,
borderColor: colorpalette[currseriesnum],
borderWidth: 2
});
chart.update();
currseriesnum++;
They gave me the answer on the ChartJS DataLabels forum:
plugins: {
datalabels: {
color: function(ctx) {
// use the same color as the border
return ctx.dataset.borderColor
}
}
}
using chartjs 2.1.4 (customized one), default chart showing animation bottom to top, in our application downside of canvas two buttons (left and right)
in click on left button chart animation want to right to left,
in click on right button chart animation want to show left to right
please help me to find a solution
thanks in advance
var myData = [{x:0,y:0},{x:1,y:2},{x:2,y:1},{x:3,y:3}];
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [myData[0]],
lineTension: 0
}]
},
labels:['a','a','a','a','a','a',],
options: {
scales: {
xAxes: [{
type: 'linear',
ticks: {
min: 0,
max: 3
}
}],
yAxes: [{
ticks: {
min: 0,
max: 3
}
}]
}
}
});
var next = function() {
var data = myChart.data.datasets[0].data;
var count = data.length;
data[count] = data[count - 1];
myChart.update({duration: 0});
data[count] = myData[count];
myChart.update();
if (count < myData.length) {
setTimeout(next, 1000);
}
}
setTimeout(next, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
No easy option, You have to use something like this.
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);