How can I create a nested doughnut that has layers with different thickness? Chartjs only allows cutoutPercentage to be defined in options property and all layers are changed by this value. I want to have a nested doughnut that has layers with different thickness. For example, in this chart, I want to make red and blue layers with different thickness.
var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
type: 'doughnut',
options: {
cutoutPercentage: 75
},
data: {
datasets: [{
backgroundColor: [
"red"
],
data: [1]
},
{
backgroundColor: [
"blue"
],
data: [1]
}
]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="chart"></canvas>
I have found the solution by putting two doughnut charts on top of each other. In this way, I was able to set different cutoutPercentage values. In this example, red and blue layers have different thickness.
var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
type: 'doughnut',
options: {
cutoutPercentage: 20
},
data: {
datasets: [{
backgroundColor: [
"red"
],
data: [1]
}]
}
});
var ctx2 = document.getElementById("chart2");
var chart2 = new Chart(ctx2, {
type: 'doughnut',
options: {
cutoutPercentage: 90
},
data: {
datasets: [{
backgroundColor: [
"blue"
],
data: [1]
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<div class="container" style="position:relative; ">
<canvas id="chart" style="position:absolute;"></canvas>
<canvas id="chart2" style="position:absolute;"></canvas>
</div>
Related
I am trying to create a bar chart in angular using chart.js and angular.
I want to display the disaters vs area. with the type of disaster ( earthquake, hurricane, storm...etc) on the x-axis and area (as in location) on the y-axis.
However, the area data is string and does not work when trying to plot a bar graph as it requires numbers.
I am reading the data as follows:
ngOnInit(): void {
this.chartService.noOfEqu().subscribe((res) => {
let area = res.map((res) => res.area);
let disaster = res.map((res) => res.disasterNature);
new Chart('disasterCanvas', {
type: 'bar',
data: {
labels: disaster,
datasets: [
{
data: area,
label: 'area',
backgroundColor: '#A121D5',
},
],
},
options: {
plugins: {
legend: {
display: true,
},
},
scales: {
x: {
ticks: {
display: true,
},
},
y: {
ticks: {
display: true,
},
},
},
},
});
});
}
}
Where let area = res.map((res) => res.area); is the area variable.
I want to know what is the best way to structure the data to be entered into the graph.
The disaster data that is logged is:
and the area data :
How can i structure the area such that it counts how much areas that a disaster has occured and plot it on the bar chart?
Thank you in advance...if there is anything i can clarify please let me know in the comments
Also is there another way to display this data besides tallying the string data?
You need to add a labels array to the scale and set the type to category to use string data:
const options = {
type: 'bar',
data: {
labels: ["Earthquake", "Tornade", "Flood"],
datasets: [{
label: '# of Votes',
data: ['Paris', 'Berlin', 'London'],
backgroundColor: 'pink'
}]
},
options: {
scales: {
y: {
type: 'category',
reverse: true,
labels: ['', 'London', 'Paris', 'Berlin']
}
}
}
}
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 am using charts.js to visualise some data, but unfortunately, I only see two data points, while the scale is like to highest value.
This is my code.
<canvas id="myChart" width="400" height="80"></canvas>
<script>
window.onload=function() {
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: '',
datasets: [{
label: 'Tests',
backgroundColor: 'rgb(252, 160, 12)',
borderColor: 'rgb(8, 19, 42)',
data: [
{x:'2016-12-23', y:200}, {x:'2016-12-24', y:300}, {x:'2016-12-25', y:400}, {x:'2016-12-26', y:100}
]
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
}
});
};
</script>
I don't see, why this is limited. Suggestions are more than welcome.
Try like this, please.
<canvas id="myChart" width="400" height="80"></canvas>
<script>
window.onload=function() {
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: ['2016-12-23','2016-12-24','2016-12-25','2016-12-26']
datasets: [{
label: 'Tests',
backgroundColor: 'rgb(252, 160, 12)',
borderColor: 'rgb(8, 19, 42)',
data: [200, 300, 400 100]
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
}
});
};
</script>
I'm using Chart.JS v 2.9.3 to create a line chart
line-chart diagram to show the month-wise total of expenses of selected product
For example, if the user select XYZ product then this charts would show the monthly expenses [Jan-2021-Dec-2021]
and if that respective product expense only present Jan-2021 then it displays month on y-Axes at staring
here is jsfiddle example
Adding offset trick I had already tried xAxes : [{ offset:true }],
var config = {
type: 'line',
data: {
labels: ["jan-2021"],
datasets: [{
label: "month-year",
data: [65],
backgroundColor: "rgb(118, 101, 228)",
}],
},
scales : {
xAxes : [{
offset:true
}],
},
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<div class="myChart">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>
</div>
please refer to the above image for getting an idea of what I'm trying to archive, I'm not concern about dot that on the chart
As you can see, the points are stick to the y-axis. Is there a possibility to center the line chart when only one data is present in the diagram?
Chart.js does not support this kind of use case since it gives a distorted image of your chart since point and label don't align anymore. If you really want this you can check beforehand in your code if there is only 1 data point there. If this is the case add an empty string in your labels array in the front and back and add zero at the front of back of your data array (or a slightly lower value as your single datapoint so that the scales don't get big steps) like so:
var config = {
type: 'line',
data: {
labels: ["", "January-2021", ""],
datasets: [{
label: "month-year",
data: [0, 134335066, 0],
backgroundColor: "rgb(118, 101, 228)",
}],
},
scales: {},
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<div class="myChart">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>
</div>
You can use align option:
var mybarChart = new Chart(ctx, {
type: 'bar',
responsive: true,
data: data,
options: {
legend: {
display: false,
position: 'bottom',
align: 'center'
},
var config = {
type: 'line',
data: {
labels: ["", "January-2021", ""],
datasets: [{
label: "month-year",
data: [0, 134335066, 0],
backgroundColor: "rgb(118, 101, 228)",
}],
options: {
legend: {
display: false,
position: 'bottom',
align: 'center'
},
},
scales: {},
};
refer to this
I have Horizontal Bar comparing Rooms & Guests target vs achieved.
Rooms has 3 data values (Available, Budget, Actual) and Guests has only 2 (Budget, Actual).
Below is the code generates the chart:
data = [{
label: 'Available',
backgroundColor: '#3366ff',
data: [5580]
}, {
label: 'Budget',
backgroundColor: '#009999',
data: [5000, 6500]
}, {
label: 'Actual',
backgroundColor: '#92d400',
data: [5200, 7245]
}];
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Rooms", "Guests"],
datasets: data
}
}
Issue with the above code is, Rooms Budget bar is not showing up.
It shows only when I add [5580,0] to the Guests Available data value; however there is no such Data for Guests like Rooms.
Here is the JSFiddle (https://jsfiddle.net/kingBethal/vtf17k84/8/).
5000 is the lowest value in your dataset and Chart.js is creating its scale starting at 5000:
Set the beginAtZero property to true and you'll see the expected bar:
let data = [{
label: 'Available',
backgroundColor: '#3366ff',
data: [5580]
}, {
label: 'Budget',
backgroundColor: '#009999',
data: [5000, 6500]
}, {
label: 'Actual',
backgroundColor: '#92d400',
data: [5200, 7245]
}];
let myChart = new Chart(document.getElementById('chart'), {
type: 'horizontalBar',
data: {
labels: ["Rooms", "Guests"],
datasets: data
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
My HTML Canvas is like below :
<div>
<canvas id="chartdiv" width="200" height="200"></canvas>
</div>
Following is the json data,
[{
"SID": "1",
"NAME": "niten",
"FTEPERCENT": "71.29",
"FTCPERCENT": "28.71"
}, {
"SID": "2",
"NAME": "jiten",
"FTEPERCENT": "82.08",
"FTCPERCENT": "17.92"
}]
And below is the enter code :
window.onload = function() {
$.ajax({
type: "POST",
url: "ViewDirectManagersOverviewDetails.aspx/GetEmployeeOverviewDetailsForDirectManagers",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(Result) {
debugger;
Result = JSON.parse(Result.d);
var newctx1;
for (var i = 0; i < Result.length; i++) {
var data1 = parseFloat(Result[i].FTEPERCENT);
var data2 = parseFloat(Result[i].FTCPERCENT);
var tempData = {
labels: ["FTE", "FTC"],
datasets: [{
data: [data1, data2],
backgroundColor: [
"#FF6384",
"#36A2EB"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB"
],
borderWidth: 5
}]
};
// For a pie chart1
var ctx = document.getElementById("chartdiv").getContext("2d");
var myLineChart = new Chart(ctx, {
type: "pie",
data: tempData,
options: options,
title: {
display: true,
text: 'Employee Overview',
fontStyle: 'bold',
fontSize: 20
}
});
}
$('chartdiv').append(newctx1);
}
});
};
The above code is plotting pie chart on same canvas id but I want to plot to separate pie charts since json has two array objects but canvas id should be same.
Looping through json will give two separate objects so I will have to draw in table two separate pie chart the way we show data in datatable similarly need to show pie charts in table rows.
Unfortunately, there is no way to render multiple charts within a single canvas. Chart.js binds to the entire canvas object and uses the full canvas to render a single chart.
If you want to see two separate pie charts then you need two separate canvas elements. However, you can of course add multiple datasets to a single graph if that suites your needs. For the pie chart it will embed a smaller pie chart within a larger one.
Here is an example config that shows how to setup multiple datasets in a single pie chart.
var ctx = document.getElementById("chart-area").getContext("2d");
var myPie = new Chart(ctx, {
type: 'pie',
data: {
labels: ["FTE", "FTC"],
datasets: [{
label: 'Dataset 1',
data: data1,
backgroundColor: [
"#FF6384",
"#36A2EB"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB"
],
borderWidth: 5,
}, {
label: 'Dataset 2',
data: data2,
backgroundColor: [
"#FF6384",
"#36A2EB"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB"
],
borderWidth: 5,
}],
},
options: {
title: {
display: true,
text: 'Employee Overview',
fontStyle: 'bold',
fontSize: 20
}
}
});
Here is a codepen example to demonstrate this.