I have a ChartJS that display the label as slanted when you resize the window to smaller size.
What I want to do is to lower the X-labels down a bit vertically so they are not as close to the base of the graph if possible.
After googling around, it looks like I can disable the tick display for x-Axis and use the option's animation to do this manually. I tried to implement this in the following fiddle.
animation: {
duration: 1,
onComplete: function() {
var chartInstance = this.chart;
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var label = bar._model.label;
var xOffset = bar._model.x;
var yOffset = bar._model.y;
ctx.fillText(label, xOffset, 420);
});
});
}
},
However, I can't get the label to scale properly when I resize the window. Can you help?
Chart.js implements a padding property in the ticks object for this:
Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
Here's a working example with the x-axis labels offset 20px down from the line:
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["Blue", "Red", "Green", "Orange", "Purple"],
datasets: [{
data: [0, 1, 2, 3, 4]
}]
},
options: {
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
padding: 20
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="height:200px;width:200px">
<canvas id="chart"></canvas>
</div>
Related
I have a project where I show the movements of the robot, I want to make this map so that the x and y scales are proportional to each other.
These data are real-time data, which, as I mentioned, shows the movement of a robot.
Can anyone help me with this?
This is the figure:
myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: '',
backgroundColor: "blue",
fill: false,
data: [],
}]
},
options: {
scales: {
xAxes: [{
ticks:{
suggestedMax:15,
}
}]
yAxes: [{
ticks:{
suggestedMax:15,
}
}]
}
}
});
You can define the desired dimension of your canvas through the width or height property.
<canvas id="chartContainer" width="400"></canvas>
...or using CSS.
canvas {
width: 400px;
}
Further you should also define responsive: false and aspectRatio: 1 within the chart options, latter represents a square canvas.
options: {
responsive: false,
aspectRatio: 1,
See Configuration Options at the Chart.js documentation
I am using Chart.js v3.4 with Vue3. Here is my chart:
I am wondering if there is a way to remove the tick marks that go past the axis of the chart (pointing to the axis labels) so that the shape is a solid rectangle with labels.
Note: I am already using the drawBorder: false option for the y-axis.
Secondly I want to make it so there are exactly 5 grid lines on the y-axis to keep 4 rows of boxes on the chart at all times. I'm using dynamic data and ranges so the amount of boxes changes depending on the data. (You can see a new box just barely started at the bottom of the chart, I don't want that to be showing). The way I determine the min and max of the chart is by taking the min/max of the data array and subtracting/adding 2 to them.
You can make use of the drawTicks and count propertys to achieve what your want.
Live example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
scales: {
y: {
ticks: {
count: 5,
padding: 10
},
grid: {
drawTicks: false
}
},
x: {
ticks: {
padding: 10
},
grid: {
drawTicks: false
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>
Here are my Javascript options and two screenshots showing examples of charts I've created. The width of the bars is set to 50 pixels. But the overall size of the chart is the same, even though one chart has two bars and the other five. This means the chart with five bars is squeezed tighter than the one with two, even though the actual bars are all 50 pixels. I'm looking for more consistency between these two charts, so that the one with only two bars would be a much "shorter" chart overall, with spacing to match the one with five bars. Is this possible with chart.js?
options: {
aspectRatio: 3,
legend: {
display: false
},
scales: {
xAxes: [{
barThickness: 50,
ticks: {
beginAtZero: true,
suggestedMax: maxAxisX
}
}],
yAxes: [{
maxBarThickness: 50,
ticks: {
beginAtZero: true
}
}]
}
}
The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the beforeRender hook to define the height of the canvas parent div depending on the number of bars contained in the chart. This function must also consider the space needed on top and below the chart, especially for drawing the xAxis ticks.
plugins: [{
beforeRender: chart => {
if (!chart.config.options.nonChartAreaHeight) {
var yAxis = chart.scales['y-axis-0'];
chart.config.options.nonChartAreaHeight = chart.chart.height - (yAxis.bottom - yAxis.top);
}
const barThickness = chart.config.data.datasets[0].barThickness;
const chartAreaHeight = (chart.config.data.labels.length * barThickness * 2);
document.getElementById("chartWrapper").style.height = (chartAreaHeight + chart.config.options.nonChartAreaHeight) + 'px';
}
}],
Please note that instead of defining the option aspectRatio, we need to define maintainAspectRatio: false.
Please have a look at the code sample below that produces two charts. This solution uses the latest stable version of Chart.js (2.9.3).
new Chart('myChart', {
type: 'horizontalBar',
plugins: [{
beforeRender : chart => {
if (!chart.config.options.nonChartAreaHeight) {
var yAxis = chart.scales['y-axis-0'];
chart.config.options.nonChartAreaHeight = chart.chart.height - (yAxis.bottom - yAxis.top);
}
const barThickness = chart.config.data.datasets[0].barThickness;
const chartAreaHeight = (chart.config.data.labels.length * barThickness * 2);
document.getElementById("chartWrapper").style.height = (chartAreaHeight + chart.config.options.nonChartAreaHeight) + 'px';
}
}],
data: {
labels: ['1', '2', '3', '4'],
datasets: [{
barThickness: 20,
data: [100, 90, 80, 70]
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
div {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div id="chartWrapper">
<canvas id="myChart"></canvas>
</div>
I am working on a webpage that presents dashboard on th basis of invoice processing project.
using below code i am populating bar chart.
function loadVolumeChart()
{
var pieChartContent = document.getElementById('chartAreaWrapper');
pieChartContent.innerHTML = '';
$('#chartAreaWrapper').append('<canvas id="line-chart" height="300" width="1500px"><canvas>');
//getData For Volume Analysis Chary
var url_string = document.referrer;;
var url = new URL(url_string);
var name = url.searchParams.get("name");
var user=url.searchParams.get("user");
var team=url.searchParams.get("team");
var date=url.searchParams.get("date");
var dates = [];
var count = [];
var from = date.split("-")[0];
var to = date.split("-")[1];
var re=$.ajax({
url: 'getTotalCounts.php',
type: 'POST',
data: {
from:from,
to:to,
team:team,
totalVolume: '00'
},
async:false,
success: function(data) {
var result =data;
var json = JSON.parse(result);
dates=json[0].data;//json[0].data;
count=json[1].data;
//alert(dates);
}
}).done(function(data){
// openPage(data);
}).fail(function(data){
alert(data.responseText);
});
//volume chart
new Chart(document.getElementById("line-chart"), {
type: 'bar', //line
data: {
labels:dates,
datasets: [{
data:count,
label: "Total Inward",
backgroundColor: "#0E6655", //borderColor
fill: true
},
]
},
options: {
responsive:false,
maintainAspectRatio: true,
legend: {
display: false
},
tooltips: {
enabled: true
},
scales: {
xAxes: [{
gridLines: {
display:false
},
barThickness: 15,
}],
yAxes: [{
barPercentage: 1.0,
categoryPercentage: 1.0,
gridLines: {
display:false
},
ticks: {
min: 0,
max:10,
stepSize: 1
}
}]
},
}
});
//end of volume chart
}
But the problem is when data is low, means if the x axis data contains only 2 dates, then the gap between two bars is too large, like the image below,
but if i add more dates then the gap reduces.i want to set gap between two bars even if their are only two bars. the gap between both should not increase if the dates (bars) according to the size of x axis data. if the data is large then it should only scroll. thats why i have added scroll bar.
the div of chart is as:
<div class="parentDiv" >
<div class="chartAreaWrapper" id="chartAreaWrapper" style="height:80%;width:70%;margin-left: 20px; margin-top: 10px;float: left;">
<canvas id="line-chart" height="300" width="1500px"></canvas>
</div>
</div>
In your code, the option xAxis.barThickness defines that the width of individual bars has to be of 15 pixels. Simply remove this option.
You should also consider to use the latest stable version of Chart.js (currently v2.9.3) where the option xAxis.barThickness is deprecated. The options barThickness, barPercentage and categoryPercentage are now part of the dataset configuration.
I need to create a bubble chart style chart which has two axis, both which are words rather than text.
In my example I want:
axis x to be colours, e.g. red, blue, Yellow
axis y to be cars, e.g. small car, medium car, big car
from this I want to plot how many of each car was ordered, e.g. if 2 small red cars were ordered and one big blue car was ordered there would be a bubble on small red which is twice the size of the bubble at big blue.
I have done a bit with charts.js, but none of my examples cover how to use text instead of numbers.
Any help would be greatly appreciated with this, I have looked through the documentation here.. enter link description here, but have not been able to get anything to work.
Thanks in advance.
I've recently had the same requirement for a dataset and utilised the callback function for each axis in the scale option. I populated the list of values for the labels into an array and then used the index of the point to perform a lookup to rename the tick label.
var colours = ["Red", "Blue", "Green", "Yellow"];
var carSizes = ["Small", "Medium", "Large"];
// Small Red = 10
// Small Green = 14
// Medium Yellow = 23
var dataPoints = [{x: 0, y: 0, r: 10}, {x: 2, y: 0, r: 14}, {x: 3, y: 1, r: 23}
var myBubbleChart = new Chart(bubbleCtx, {
type: 'bubble',
data: dataPoints,
options: {
title: {
display: true,
text: "Car Orders"
},
scales: {
yAxes: [{
ticks: {
stepSize: 1,
callback: function (value, index, values) {
if (index < carSizes.length) {
return carSizes[carSizes.length - (1 + index)]; //this is to reverse the ordering
}
}
},
position: 'left'
}],
xAxes: [{
ticks: {
stepSize: 1,
callback: function (value, index, values) {
if (index < colours.length) {
return colours[index];
}
}
},
position: 'bottom'
}]
}
}
});
After much trial and error, I found it necessary to set the step size to 1 otherwise the chart would get skewed with data appearing outside the gridlines.
If you are not setting the data dynamically and know the minimum and maximum values for each axis, you can set the min and max attributes for the ticks and specify the axis type as 'category'.
yAxes: [{
type: 'category',
ticks: {
stepSize: 1,
min: 'Small',
max: 'Large'
},
position: 'left'
}]
You can use line type chart with bordercolour radius 0. it will act as line chart and avoid line. It will appeared like bubble chart.