In Chartjs, is there any way to shift the line plot to the right 1 tick? Right now the line starts from the y-axis and as the result at the origin, there are labels from both x and y axis that does not look that nice. I attach the screenshot
Ideally I would like the 09-2016 to move to the right a litte. Really appreciate any help.
You can add an empty label and to the start of the labels array and a null value to the start of your dataArray to shift it a bit
Example:
var options = {
type: 'line',
data: {
labels: ["", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [null, 12, 19, 3, 5, 2, 3],
borderWidth: 1,
fill: false,
borderColor: 'red',
backgroundColor: 'red'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: 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/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
Related
Is there anyway to remove this overflowing section of the gridlines?
This is exactly what I'm looking for:
I've seen a few post from years ago with this question and none of them have really yielded any results. Those were so long ago that I pray that a fix has happened since then.
Cheers!
You can set tickLength to 0 in the grid options. To make the ticks still appear a bit away from the scale you can use the padding option:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
y: {
ticks: {
padding: 4,
crossAlign: 'far'
},
grid: {
tickLength: 0
}
},
x: {
grid: {
tickLength: 0
}
}
}
}
}
const 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.7.1/chart.js"></script>
</body>
I'm using chartjs 2, and I'm trying to disable the grid lines on xAxis and enable grid lines on yAxis and make them dashed.
I have achieved this functionality by adding this to my Line graph config;
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
}
}],
yAxes: [{
display: true,
gridLines: {
display: true,
borderDash: [2],
borderDashOffset: [2],
color: 'rgba(0, 0, 0, 0.04)',
drawBorder: false,
drawTicks: false,
}
}]
}
However, when I do this, it randomly adds another axis to my chart with completely bogus values. I want to remove this axis and keep the original but also keep the gridLines config.
You can set the defaults for this. You can set it in the scale default so it does it for all the chart types and scales. If you specifically want to hide the X axis gridLines only you need to set it on chart type level.
Chart.defaults.scale.gridLines.display = false // hides all the gridLines in all charts for all axes
Chart.defaults.line.scales.xAxes[0].gridLines = {
display: false
} // Hides only the X axes gridLines in all line charts
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: 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/2.9.4/Chart.js"></script>
</body>
There is an example of how to change line segment color based on point value, with a function like this
borderColor: function(context) {
if (context.p0.parsed.y == 5){
return 'transparent';
}
},
I want to set the color based on the value of the label. This doesn't work:
context.p0.parsed.x == 'February'
With the new verion of chart.js that released today (3.6.0) you can access the chart object and you get the dataIndex so you can check it in the labels array like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
segment: {
borderColor: (ctx) => (ctx.chart.data.labels[ctx.p0DataIndex] === "Green" ? "Pink" : "Orange")
}
}]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
</body>
Now i have this chart:
https://codepen.io/UnluckySerivelha/pen/BawpPYv
const ctx = document.getElementById('graph').getContext('2d');
var bar_ctx = document.getElementById('graph').getContext('2d');
x=["14 Dec","15 Dec"];
y1={"14 Dec":0,"15 Dec":0,};
y2={"14 Dec":0,"15 Dec":0,};
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: x,
datasets: [
{
label: 'Всего за день',
data: y1
},
{
label: 'Будет начислено по вкладам',
data: y2,
},
]
},
options: {
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value, index, values) {
return '$ ' + value;
}
}
}
},
responsive: true,
maintainAspectRatio: false
},
});
I want to add background image for chart area, but not for labels. I know how to add background image, but don't know how to get size of chart area without labels for assignment size and position of image. Is it possible?
You can check the chartArea property that is available in the chart context. This property has the width and height of the area where the chart itself is being drawn.
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
console.log('height: ', chart.chartArea.height);
console.log('width: ', chart.chartArea.width)
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script>
</body>
Your own code with the background colored pink: https://codepen.io/leelenaleee/pen/OJxWoPe
Official example on using an image as background: https://www.chartjs.org/docs/master/configuration/canvas-background.html#image
type: 'scatter'
Now first one is on the top. Is it possible to show different charts on the top?
picture
In your dataset array you can put a type to put a different type in there. The order of the datasets in the array decide the draw order of them.
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 13, 3, 5, 2, 3],
borderWidth: 1
},
{
type: 'bar',
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'red'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: 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/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>