I want to do an horizontal bar with 2 yaxes, Where a bar can have a positive or negative value and positive side has a yaxis and the negative side has other yaxis like the image
This is my code JSFiddle.
I can't change the names of the second yaxes
I add arrays with the same values because i would want two yaxes, It is not necessary to use "chart.js" if you knows other library where i can it use, please tell me
var canvas = document.getElementById('myChart');
var extremo1=[-5, 3, 9, -11];
var extremo2=[-5, 3, 9, -11];
var data = {
labels: ["Visua_Verbal", "Secuencial_Global", "Sensitivo_Intuitivo", "Reflexivo_Activo"],
datasets: [
{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo1
},
{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo1
}
]
};
var option = {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 12
}
}],
yAxes: [{
position: "left",
display: true,
ticks: {
callback:(label,index,labels)=>{
label = label.match(/_(\w*)/)[1];
return label;
}}
},
{
position: "right",
display: true,
ticks: {
callback:(label,index,labels)=>{
return label ;
}
}
}]
},
legend: {
display: false
}
};
var myLineChart = new Chart(canvas,{
type: 'horizontalBar',
data:data,
options:option
});
In the snippet below I've set the options labels, type, offset on the y-axes to achieve the result you want. I've also removed unnecessary properties.
var canvas = document.getElementById('myChart');
var extremo = [-5, 3, 9, -11];
var data = {
datasets: [{
backgroundColor: 'rgba(63, 191, 191, 0.75)',
borderColor: 'rgba(63, 191, 191, 0.75)',
hoverBackgroundColor: 'rgba(191, 63, 63, 1)',
hoverBorderColor: 'rgba(191, 63, 63, 1)',
data: extremo
}]
};
var option = {
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
ticks: {
maxTicksLimit: 12
}
}],
yAxes: [{
labels: ['Verbal', 'Global', 'Reflexivo', 'Sensitivo']
},
{
position: 'right',
labels: ['Visual', 'Secuencial', 'Activo', 'Intuitivo'],
gridLines: {
display: false
},
type: 'category',
offset: true
}
]
},
legend: {
display: false
}
};
var myLineChart = new Chart(canvas, {
type: 'horizontalBar',
data: data,
options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart">
Related
I want the chart to be much larger regardless of the values. Currently, the chart is the height in the picture and it does not change. This is the complete configuration for the chart I currently have. Is it possible for the chart to have more height regardless of the dataset values?
const KYCctx = document.getElementById('kycChart').getContext('2d');
const KYCChart = new Chart(KYCctx, {
type: 'bar',
data: {
labels: ["Approved", "Denied", "Pending"],
datasets: [{
data: [65, 59, 80],
backgroundColor: [
'rgba(203, 55, 55, 0.2)',
' rgba(39, 187, 101, 0.5)',
'rgba(255, 171, 45, 0.1)'
],
borderColor: [
' rgba(203, 55, 55, 1)',
'rgba(34, 195, 107, 1)',
'rgba(255, 171, 45, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgb(33,34,37)'
}
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
pointStyle: 'circle',
boxWidth: 6,
generateLabels: (chart) => {
console.log(chart);
return chart.data.labels.map(
(label, index) => ({
text: label,
fillStyle: chart.data.datasets[0].backgroundColor[index],
strokeStyle: chart.data.datasets[0].backgroundColor[index],
}
)
)
}
}
},
title: {
display: true,
align: "start",
color: "#ffff",
font: {
size: 18,
weight: 700,
lineHeight: 2
},
padding: {
bottom: 20
}
}
}
}
});
You could explicitly define the height on the canvas.
<canvas id="kycChart" height="400"></canvas>
const KYCChart = new Chart('kycChart', {
type: 'bar',
data: {
labels: ["Approved", "Denied", "Pending"],
datasets: [{
data: [65, 59, 80],
backgroundColor: [
'rgba(203, 55, 55, 0.2)',
' rgba(39, 187, 101, 0.5)',
'rgba(255, 171, 45, 0.1)'
],
borderColor: [
' rgba(203, 55, 55, 1)',
'rgba(34, 195, 107, 1)',
'rgba(255, 171, 45, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgb(33,34,37)'
}
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
pointStyle: 'circle',
boxWidth: 6,
generateLabels: (chart) => {
return chart.data.labels.map(
(label, index) => ({
text: label,
fillStyle: chart.data.datasets[0].backgroundColor[index],
strokeStyle: chart.data.datasets[0].backgroundColor[index],
})
)
}
}
},
title: {
display: true,
align: "start",
color: "#ffff",
font: {
size: 18,
weight: 700,
lineHeight: 2
},
padding: {
bottom: 20
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="kycChart" height="400"></canvas>
Given my chartJS config below
var ctx = document.getElementById('myChart').getContext('2d');
Chart.defaults.global.defaultFontColor = 'rgba(255, 255, 255, 1)';
Chart.defaults.global.defaultFontFamily = 'Arial';
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Investment', 'Sustainable'],
datasets: [{
label: 'myLabel',
data: [11, 5],
backgroundColor: [
'rgba(234, 82, 4, 0.2)',
'rgba(0, 121, 109, 0.2)'
],
borderColor: [
'rgba(234, 82, 4, 1)',
'rgba(0, 121, 109, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
labels: {
display: true
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
color: 'rgba(255, 255, 255, 0.1)'
},
scaleLabel: {
display: true,
},
}],
}
}
});
I need to get something as close as the following
Using Quickchart API, I am submitting the config through the URL, but I am having trouble setting the labels color? options:{legend:{labels:{fontColor: 'white'}},
https://quickchart.io/chart?c={type:%27bar%27,data:{labels:[%27Investment%27,%27Sustainable%20%27],datasets:[{label:%27myLabel%27,data:[11,5],backgroundColor:%20[%27rgba(234,%2082,%204,%200.2)%27,%27rgba(0,%20121,%20109,%200.2)%27],borderColor:%20[%27rgba(234,%2082,%204,%201)%27,%27rgba(0,%20121,%20109,%201)%27]}]}}
Gives me
Update 2
I am trying to construct the URL but I am getting some issues;
<script type="text/javascript">// <![CDATA[
var carbon = {
type: 'bar',
data: {
labels: ['Average Investment', 'Sustainable Investment'],
datasets: [{
label: 'Tonnes of CO2 per year',
data: [11, 5],
borderWidth: 1,
backgroundColor: ['rgba(234, 82, 4, 0.2)', 'rgba(0, 121, 109, 0.2)'],
borderColor: ['rgba(234, 82, 4, 1)', 'rgba(0, 121, 109, 1)'],
}]
},
options: {
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
color: '#fff',
backgroundColor: 'rgba(34, 139, 34, 0.6)',
borderColor: 'rgba(34, 139, 34, 1.0)',
borderWidth: 1,
borderRadius: 5,
formatter: (value) => {
return value + 'k';
},
},
},
legend: {
labels: {
fontColor: 'white'
}
},
title: {
display: true,
text: 'Tones of CO2 pear year'
},
scales: {
xAxes: [{
ticks: {
fontColor: 'white'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
fontColor: 'white'
},
gridLines: {
color: 'rgba(255, 255, 255, 0.1)'
},
}]
}
}
};
var link = JSON.stringify(carbon);
var link0 = JSON.parse(link);
var link2 = encodeURI(link0);
console.log(typeof link0+ " "+typeof link+" ------------------ "+typeof link2);
// ]]></script>
<div><img width="200" height="100" src="https://quickchart.io/chart?c="/></div>
Which should render the following
Which version of Chart.js are you using because it seems to be working fine with your config.
quickChart: https://quickchart.io/chart?bkg=%23002A5E&c={%20type:%20%27bar%27,%20data:%20{%20labels:%20[%27Investment%27,%20%27Sustainable%27],%20datasets:%20[%20{%20label:%20%27Tonnes%20of%20CO2%20per%20year%27,%20data:%20[11,%205],%20borderWidth:%201,%20backgroundColor:%20[%20%27rgba(234,%2082,%204,%200.2)%27,%20%27rgba(0,%20121,%20109,%200.2)%27%20],%20borderColor:%20[%20%27rgba(234,%2082,%204,%201)%27,%20%27rgba(0,%20121,%20109,%201)%27%20],%20}%20]%20},%20options:%20{%20legend:%20{labels:%20{fontColor:%20%27white%27}},%20scales:%20{%20xAxes:%20[{ticks:%20{fontColor:%20%27white%27}}],%20yAxes:%20[{%20ticks:%20{%20beginAtZero:%20true,%20fontColor:%20%27white%27%20},%20gridLines:%20{%20color:%20%27rgba(255,%20255,%20255,%200.1)%27%20},%20}]%20}%20}%20}
var options = {
type: 'bar',
data: {
labels: ['Investment', 'Sustainable'],
datasets: [{
label: 'Tonnes of CO2 per year',
data: [11, 5],
borderWidth: 1,
backgroundColor: [
'rgba(234, 82, 4, 0.2)',
'rgba(0, 121, 109, 0.2)'
],
borderColor: [
'rgba(234, 82, 4, 1)',
'rgba(0, 121, 109, 1)'
],
}]
},
options: {
legend: {
labels: {
fontColor: 'white'
}
},
scales: {
xAxes: [{
ticks: {
fontColor: 'white'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
fontColor: 'white'
},
gridLines: {
color: 'rgba(255, 255, 255, 0.1)'
},
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
background-color: #002A5E;
}
<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>
I am using chart.js and it's bar chart. I am displaying some data for the period of 12 months. What I would like to do is to set the width of the bar that is representing current month to a higher value than the others. But, I am not sure how to do this, since I only saw an option of setting the width to every bar in the dataset. This are my options that I currently have:
const options = {
type: "bar",
data: {
labels: counties.map(county => dateStringEU(county.Date.split(" ")[0])).reverse(),
datasets: [
{
backgroundColor: "#006BE8",
borderColor: "rgba(151,187,205,1)",
barPercentage: 0.9,
categoryPercentage: 0.9,
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [
{
ticks: {
fontColor: '#736B8A',
beginAtZero: true,
stepSize: 100
},
gridLines: {
display: false
}
}
],
xAxes: [
{
ticks: {
fontColor: '#736B8A'
},
gridLines: {
display: false
}
}
]
}
}
}
Is it possible to set the width individually for each bar and how can we do it if so?
Despite it's not clearly documented, you can define barPercentage as an array of values.
barPercentage: [0.5, 0.5, 0.5, 0.5, 1, 0.5, 0.5],
Please have a look at the amended code from Chart.js bar documentation.
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: [0.5,0.5,0.5,0.5,1,0.5,0.5],
categoryPercentage: 1,
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
scales: {
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="80"></canvas>
I created a doughnut chart. Is there any chance to make that colors like gradient ? I saw this post, I tried to implement on my own chart but I could not.
Any help, I will be grateful.
var ctx = $('#teamDoughnutChart');
var doughnutBar = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Status",
backgroundColor: [
'rgba(192, 57, 43,1)',
'rgba(244, 187, 18, 1)',
'rgba(41, 128, 185,1)',
'rgba(39, 174, 96,1)',
'rgba(191, 199, 215, 1)'
],
borderColor: 'rgba(73, 79, 92, 0)',
data: [24, 38, 96, 79, 41]
}]
},
options: {
cutoutPercentage: 70,
maintainAspectRatio: false,
startAngle: 0,
tooltips: {
mode: 'index',
backgroundColor: '#393e48'
},
legend: {
position: 'bottom',
labels: {
fontSize: 12,
padding: 25,
boxWidth: 15
}
}
}
});
<canvas id="teamDoughnutChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a same problem. I found solution. Try this
var canvas = $('#teamDoughnutChart');
var ctx = canvas.getContext('2d');
var gradientColors = [
{
start: '#f3bb98',
end: '#ea8ba9'
},
{
start: '#F6A064',
end: '#ED5384'
}
];
var gradients = [];
gradientColors.forEach( function( item ){
var gradient = ctx.createLinearGradient(0, 0, 150 , 150);
gradient.addColorStop(0, item.start);
gradient.addColorStop(1, item.end);
gradients.push(gradient);
});
var doughnutBar = new Chart(canvas, {
type: 'doughnut',
data: {
labels: ["A", "B"],
datasets: [{
label: "Status",
backgroundColor: gradients,
borderColor: 'rgba(73, 79, 92, 0)',
data: [24, 38]
}]
},
options: {
cutoutPercentage: 70,
maintainAspectRatio: false,
startAngle: 0,
tooltips: {
mode: 'index',
backgroundColor: '#393e48'
},
legend: {
position: 'bottom',
labels: {
fontSize: 12,
padding: 25,
boxWidth: 15
}
}
}
});
I am using Chartjs v.1.0.2 and trying to set a point dot only to appear on hover over chart. After it it should be removed. I have managed to show it, by changing the object value, but it is not fluid motion and it doesn't show point always. This also doesn't hide it on hover out.
How can it be fluid and hide when mouse is not over?
window.onload = function(){
var ctx = $("#chart1").get(0).getContext("2d");
var chart1 = new Chart(ctx).Line(data1, options);
$("#chart1").hover(function(e) {
var activeBars = chart1.getPointsAtEvent(e);
activeBars[0].display = true;
// console.log(activeBars[0]);
chart1.update();
});
};
var data1 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(95,186,88,0.7)",
strokeColor: "rgba(95,186,88,1)",
pointColor: "rgba(95,186,88,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var options = {
responsive: true,
bezierCurve : false,
scaleShowLabels: false,
scaleFontSize: 0,
pointDot : false,
scaleBeginAtZero: true,
scaleShowHorizontalLines: false,
scaleShowVerticalLines: true,
scaleGridLineColor : "rgba(232,232,232)",
showTooltips: true,
customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html(innerHtml);
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
}
};
simplified fiddle
Tested with Chart.js v2.6.0
Global setting will do the trick:
Chart.defaults.global.hover.intersect = false;
Or directly in chart config:
options: {
hover: {
intersect: false;
}
}
And point settings for dataset.
initial color of the point should be transparent
hover color must be set to the desired color
e.g.
datasets: [{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
data: [10, 30, 46, 2, 8, 50, 0],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgb(255, 99, 132)',
pointHoverBorderColor: 'rgb(255, 99, 132)'}],...
window.onload = function() {
const mode = 'index';
const intersect = false;
const config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
data: [10, 30, 46, 2, 8, 50, 0],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgb(255, 99, 132)',
pointHoverBorderColor: 'rgb(255, 99, 132)',
}, {
label: 'My Second dataset',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgb(54, 162, 235)',
data: [7, 49, 46, 13, 25, 30, 22],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgb(54, 162, 235)',
pointHoverBorderColor: 'rgb(54, 162, 235)',
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Mode: index, intersect = false'
},
tooltips: {
mode: 'index',
intersect: intersect,
},
hover: {
mode: mode,
intersect: intersect
},
}
};
const ctx = document.getElementById('canvas').getContext('2d');
const chart = new Chart(ctx, config);
}
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
Edit: The following solution is for Chart.js v1.0.2 (the latest version at the time this solution was proposed). Please refer to this answer which provides a solution for Chart.js v2.x.x.
I ran into a similar situation a while back and resolved this by making the default point dot "invisible" as follows:
setting pointDotRadius to 1
setting pointStrokeColor to white with the alpha set to 0
The two steps above make the default point dot very small, this, in combination with the transparent point stroke, makes the default point dot invisible. Now if we make the pointDotStrokeWidth large enough, we can achieve the desired hover effect. i.e.
set pointDotStrokeWidth to a larger value (I used 8)
set the desired values for pointColor, pointHighlightFill, pointHighlightStroke
[Note: the same effect can be achieved by making pointColor
transparent but if you are plotting multiple datasets, then the
tooltip wouldn't show the corresponding line color next to the data
value.]
Example below (or you can checkout this Fiddle: ChartJS - Show Points on Hover):
var data = {
labels: ["Point0", "Point1", "Point2", "Point3", "Point4"],
datasets: [
{
label: "My Chart",
fillColor: "rgba(87, 167, 134, 0.2)",
strokeColor: "rgba(87, 167, 134, 1)",
pointColor: "rgba(87, 167, 134, 1)",
pointStrokeColor: "rgba(255, 255, 255, 0)",
pointHighlightFill: "rgba(87, 167, 134, 0.7)",
pointHighlightStroke: "rgba(87, 167, 134, 1)",
data: [5, 39, 109, 19, 149]
}
]
};
var ctx = document.getElementById("my_chart").getContext("2d");
myChart = new Chart(ctx).Line(data, {
responsive : true,
bezierCurve: false,
datasetFill: true,
pointDotRadius: 1,
pointDotStrokeWidth: 8,
pointHitDetectionRadius: 20,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="my_chart"></canvas>
$("#chart1").mouseover(function(e) {
chart1.datasets[0].points[0].display = true;
chart1.update();
});
$("#chart1").mouseout(function(e) {
chart1.datasets[0].points[0].display = false;
chart1.update();
});
Try using mouseover and mouseout as shown below. Similarly you can also use mouseenter and mouseleave methods to handle events.
$("#chart1").mouseover(function(e) {
var activeBars = chart1.getPointsAtEvent(e);
activeBars[0].display = true;
chart1.update();
});
$("#chart1").mouseout(function(e) {
var activeBars = chart1.getPointsAtEvent(e);
activeBars[0].display = false;
chart1.update();
});
This is a six years old question but I think in 2022 we can use ChartJS version 4.0.1.
ChartJS supports interactions behavior, and they can be configured via interaction, hover or tooltips settings on the chart configuration.
For this we will use the hover setting and select the index mode. This mode finds an item at the same index. If the intersect setting is false the nearest item, in the x direction, is used to determine the index.
Here is a working snippet
const 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
}
]
}
const options = {
maintainAspectRatio: false,
elements: {
point: {
hoverRadius: 6,
},
},
hover: {
mode: 'index',
intersect: false,
},
}
const config = {
type: 'line',
data,
options,
}
const $chart = document.getElementById('chart')
const chart = new Chart($chart, config)
<div class="wrapper" style="width: 98vw; height: 180px">
<canvas id="chart"></canvas>
</div>
<script src="https://unpkg.com/chart.js#4.0.1/dist/chart.umd.js"></script>