So basically the point placement in the chart is correct, the only issue is the shape of the curve since it should follow only the integers values.
What it looks like:
What it should look like
)
Chart code
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{% for value in x %} '{{value}}', {% endfor %}],
datasets: [{
label: '# Des employes',
data: [{% for c in y %} '{{c}}', {% endfor %} ],
fill: true,
backgroundColor: [
'rgba(54, 162, 235, 0.5)',
],
borderColor: [
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
ticks:{stepSize:1}
}
}
}
});
Set stepped to after
(or before, middle, true):
...
datasets: [{
stepped: 'after',
👆
...
Related
I am using chartjs 2.9.4. I am trying to add the second y-axis on the right. As you can see below, I added the second y-axis 'B' that is positioned on the right.
var myDataSets = [
{% for key, value in mean_matrix_dic.items %}
{
yAxisID: 'A',
label: [{% for key2, val in value.items %}{% if forloop.first %}'{{ key }}',{% endif %}{% endfor %}],
backgroundColor: fixedColors({{ forloop.counter0 }}),
borderColor: fixedColors({{ forloop.counter0 }}),
borderWidth: 3.5,
data: [{% for key2, val in value.items %}'{{ val }}',{% endfor %}],
fill: false,
lineTension: 0,
tension: 0.0
},
{
yAxisID: 'B',
label: [{% for key2, val in value.items %}{% if forloop.first %}'{{ key }}',{% endif %}{% endfor %}],
backgroundColor: fixedColors({{ forloop.counter0 }}),
borderColor: fixedColors({{ forloop.counter0 }}),
borderWidth: 3.5,
data: [{% for key2, val in value.items %}'{{ val }}',{% endfor %}],
fill: false,
lineTension: 0,
tension: 0.0,
},
{% endfor %}
];
var estimatedMeansLineChart = new Chart(chx, {
type: 'line',
data: {
labels: [{% for var_2 in vars_2 %}'{{ var_2 }}',{% endfor %}],
datasets:myDataSets,//datasets
},//data
options: {
responsive: true,
title: {
display: true,
text: 'Estimated Marginal Means of {{ dep_var }}'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
x: {
display: true,
scaleLabel: {
display: true,
labelString: '{{ ind2 }}'
}
},
yAxes: [{
id: 'A',
position: 'left',
display: true,
scaleLabel: {
display: true,
labelString: 'Estimated Marginal Means'
}
},
{
id: 'B',
position: 'right',
display: true,
scaleLabel: {
display: false,
labelString: 'Estimated Marginal Means'
}
}]
}
}//options
});
I get the following output when I run it:
My question is that how can I get rid of those additional data labels and have only one? E.g., one of the red box, one of the blue box and one of the black box. Since I added an additional y-axis on the right, it automatically added those data labels too.
To hide the data labels, I know that I should use the legend property
options: {
legend: {
display: false
},
......
......
......
}
However, when I use it, all data labels disappears. I only want to show the data labels of the left y-axis 'A' and hide the data labels of the second one (the right y-axis 'B').
Any suggestions?
Yeah, I think I found the solution here.
Basically, I needed add the filter property:
....
....
options: {
legend: {
labels: {
filter: function(item, chart) {
return !item.text.includes('_temp_xyz_abc');
}
},
},
....
....
....
The '_temp_xyz_abc' can be seen here:
var myDataSets = [
{% for key, value in mean_matrix_dic.items %}
{
yAxisID: 'A',
label: [{% for key2, val in value.items %}{% if forloop.first %}'{{ key }}',{% endif %}{% endfor %}],
backgroundColor: fixedColors({{ forloop.counter0 }}),
borderColor: fixedColors({{ forloop.counter0 }}),
borderWidth: 3.5,
data: [{% for key2, val in value.items %}'{{ val }}',{% endfor %}],
fill: false,
lineTension: 0,
tension: 0.0,
},
{
yAxisID: 'B',
label: [{% for key2, val in value.items %}{% if forloop.first %}'_temp_xyz_abc',{% endif %}{% endfor %}],
backgroundColor: fixedColors({{ forloop.counter0 }}),
borderColor: fixedColors({{ forloop.counter0 }}),
borderWidth: 3.5,
data: [{% for key2, val in value.items %}'{{ val }}',{% endfor %}],
fill: false,
lineTension: 0,
tension: 0.0,
},
{% endfor %}
];
And it worked as you can see below.
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>
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
Who know how to draw lines and points inside a bar something like this:
You can draw the lines as floating bars where individual bars are specified with the syntax [min, max], same as you already do for your your other bars. Given an array of number values, the "line" data can be produced with Array.map() as follows.
data: [110, 150, 140, 100, 120].map(v => [v - 1, v + 1])
Then you need to define individual stacked xAxes for the "bar" and the "line" datasets. In order to have the original "line" values displayed in the tooltips, a toolips.callback.label function is also needed.
The points can be defined in an additional dataset of type 'scatter'.
Please have a look at below runnable code snippet.
new Chart("chart", {
type: "bar",
data: {
labels: ["4", "3", "2", "1", "0"],
datasets: [{
label: "Bars",
backgroundColor: "rgba(0, 255, 0, 0.2)",
data: [[20, 100], [50, 180], [60, 120], [10, 130], [70, 140]],
xAxisID: "x-axis-actual",
order: 1
},
{
label: "Lines",
backgroundColor: "rgb(0, 0, 0)",
data: [90, 150, 110, 90, 120].map(v => [v - 1, v + 1]),
xAxisID: "x-axis-target",
order: 2
},
{
label: "Points",
backgroundColor: "rgb(255, 255, 255)",
borderColor: "rgb(0, 0, 0)",
data: [80, 110, 90, 100, 120],
type: "scatter"
}
]
},
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
const dataset = data.datasets[tooltipItem.datasetIndex];
const v = dataset.data[tooltipItem.index];
return dataset.label + ': ' + (tooltipItem.datasetIndex == 1 ? (v[1] + v[0]) / 2 : tooltipItem.value);
}
}
},
scales: {
xAxes: [{
id: "x-axis-target",
stacked: true
},
{
display: false,
offset: true,
stacked: true,
id: "x-axis-actual",
gridLines: {
offsetGridLines: true
}
}
],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="120"></canvas>
i would like to ask is it possible to display data values on a half donuts chart? Want to show the data value as text at the bottom of the chart by taking its value from the array
here is the link: https://jsfiddle.net/z638ttv0/16/
Thanks for the help in advance
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [50,100-50],
backgroundColor: [
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI
}
});
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [50,100-50],
text: "ff",
backgroundColor: [
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI
}
});
.test
{
position:absolute;
bottom:-20px;
left:calc(50% - 10px);
display:block;
}
<body>
<span class="test">test</span>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
</body>
Customised value