Hello all its there anyway in charts.js to treat 60 as zero and numbers below it to go down (like in the picture) instead of up in a bar chart?
You can use floating bars for this by instead of providing an array with values you provide an array with arrays, in which each array is a bar with a start and end value, in here you always provide 60 and the value you want:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [
[12, 60],
[50, 60],
[3, 60],
[75, 60],
[20, 60],
[63, 60]
],
backgroundColor: 'pink'
}]
},
options: {}
}
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.9.1/chart.js"></script>
</body>
Related
I want to draw a horizontal reference line at a particular value.
The data is of the format:
{
"Close": 15638.8,
"Date": "2022-06-21T10:00:00.000Z",
"High": 15707.25,
"Low": 15419.85,
"Open": 15455.95,
"Volume": 0,
"id": 36
}
This is what I have figured as of now. I am unsure how to use the refLines attribute.
var dataReqdFormat = {
labels: [],
datasets: [{
data: [],
label: "Nifty",
fill: true,
borderColor: (ctx) => {
const data = ctx.chart.data.datasets[ctx.datasetIndex].data;
return data[0] >= data[data.length - 1] ? 'red' : 'green'
}
}]
};
Any help is appreciated.
You can use the annotation plugin for this:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
plugins: {
annotation: {
annotations: {
line: {
type: 'line',
yMin: 16,
yMax: 16,
borderWidth: 2,
borderColor: 'red'
}
}
}
}
}
}
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.8.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.js"></script>
</body>
I am working on a project and we are using a chart created with chart js. I want to give the legend a background color (the top part thats drawn in the image). After a lot of searching on the internet i stil havent found a solution to my problem so i thought lets try stack overflow. can some one help me Please??>!
the part i want to give a background color
here is part of my code
enter code here
<div>
<canvas id="myChart"></canvas>
</div>
<script>
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
var myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
You can use a custom plugin for this:
const plugin = {
id: 'legendBackground',
beforeDraw: (chart, args, opts) => {
const {
chartArea: {
width,
top,
left
},
ctx
} = chart;
ctx.fillStyle = opts.color || 'transparent';
ctx.fillRect(left, 0, width, top)
}
}
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
}]
},
options: {
plugins: {
legendBackground: {
color: 'pink'
}
}
},
plugins: [plugin]
}
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 need the Holiday tooltip to be grouped, that is to say, pressing a tooltip stops seeing all the Holidays. In this way, not having the "Holiday" tooltip repeated twice and showing / hiding with a single tooltip
Is it possible with chart js?
Actual:
Expected:
a single tooltip handling the "Holiday" datasets
Actual code:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
datasets: [
{
label: 'HOLIDAY',
data: [10, 10,10,10,10],
borderWidth: 1,
backgroundColor: "red",
stack: 1
},
{
label: 'HOLIDAY',
data: [10, 10,10,10,10],
borderWidth: 1,
backgroundColor: "red",
stack: 2
},
{
label: 'IN OFFICE',
data: [7, 11, 5, 8, 3],
borderWidth: 1,
backgroundColor: "blue",
stack:1
},
{
label: 'HOME OFFICE',
data: [7, 11, 5, 8, 3],
borderWidth: 1,
backgroundColor: "yellow",
stack:2
}
]
},
options: {
indexAxis: 'y',
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each horizontal bar to be 2px wide
elements: {
bar: {
borderWidth: 2,
}
},
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="400" height="100"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
Space between column in chart js
There's the screen of my output and what i want to do
enter image description here
Anyone can help please ?
You can achieve this by setting the barPercentage property
Example:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: 'blue',
barPercentage: 0.3
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'red',
barPercentage: 0.3
}
]
},
options: {
scales: {
y: {
stacked: true
},
x: {
stacked: true
}
}
}
}
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.3.2/chart.js"></script>
</body>
Now i have something like this but i need to add space between each column
I need to make a dashed line from preset time period. How can I do it in chartjs? For example, solid line for 3 months and dashed for others
example
bad implementation below
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "Red",
borderColor: 'rgb(255, 0, 0)',
data: [0, 10, 5, 2, 20, 30, 45],
}, {
label: "Blue",
borderColor: 'rgb(0, 0, 255)',
data: [38, 24, 32],
}, {
label: "Blue",
borderColor: 'rgb(0, 0, 255)',
data: [null, null, 32, 0, 0, 0, 0],
borderDash: [5, 5],
}]
},
// Configuration options go here
options: {}
});
.container {
width: 640px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class='container'>
<canvas id="myChart"></canvas>
</div>