score:-1
use "overflow-x:scroll;" instead of "overflow:scroll;"
score:4
a
chart.js docs
: "the following examples do not work:"
<canvas height="40vh" width="80vw">
: invalid values, the canvas doesn't resize https://www.chartjs.org/docs/latest/general/responsive.html
= any canvas sizes like (<canvas style="width: 100px;.."
) + position absolute and other tricks will not work her.
b
chart.js uses its parent container to update the canvas render and display sizes. however, this method requires the container to be relatively positioned and dedicated to the chart canvas only. responsiveness can then be achieved by setting relative values for the container size https://www.chartjs.org/docs/latest/general/responsive.html#important-note
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
= set any size you want for chart-container
.
c
maintainaspectratio
- by default true (maintain the original canvas aspect ratio (width / height) when resizing).responive
- by deafult true (resizes the chart canvas when its container does)
a+b+c
i do not know why other stackoverflow answers give such "complex" solutions. the overflow-x her works like any other block-level element (put 800px w image inside 600px w div = 200px overflow-x).
"hello world" example
specific for overflow add extra wrapper to chart-container
:
<div style="overflow-x: scroll">
<div class="chart-container" style="position: relative; width:900px;">
<canvas id="chart"></canvas>
</div>
</div>
when the screen width will be smaller than 900px you get horizontal scroll (on mobile for example):
** use css breakpoints to resize the container on mobile if you want.
/* data */
var data = {
labels: ["africa", "asia", "europe", "america"],
datasets: [{
/* data */
label: "data label",
backgroundcolor: ["red", "#8e5ea2","#3cba9f", '#1d49b8'],
data: [5.0,6.7,7.5, 8.6, 3.3, 4.4, 4.5]
}]
};
var options = {
responsive: true,
maintainaspectratio: true,
title: {
text: 'hello',
display: true
},
scales: {
xaxes: [{
stacked: false,
ticks: {
},
}],
yaxes: [{
stacked: true,
ticks: {
}
}]
}
};
var mychart = new chart(document.getelementbyid("chart"), {
type: 'bar',
data: data,
options: options
});
document.getelementbyid('submitchange').addeventlistener('click', function() {
console.log("before color: " + mychart.data.datasets[0].backgroundcolor[0]);
mychart.data.datasets[0].backgroundcolor[0] = "green";
mychart.update();
});
div{
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<div style="overflow-x: scroll">
<div class="chart-container" style="position: relative; width:900px;">
<canvas id="chart"></canvas>
</div>
</div>
Source: stackoverflow.com
Related Query
- How to make a chart scroll horizontally (when using Chart.js)
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- How to make dynamic chart using Vue component with chart-js
- How to make dynamic chart js using JSON in Codeigniter?
- How to make the background color of the chart as gradient using Chart.js
- How can I show "No Data" message in Pie Chart when there is no data using VueJS?
- How to make a 30days chart responsive on mobile using chart.js?
- How do I horizontally center a line chart when their is a single X-Axis value?
- How to run Chart.js samples using source code
- How to make the size of pie chart fixed without using canvas (chart.js)
- How can I make lines fully connected in a multi-line chart even when one dataset is more sparse than another?
- How do I increase the space between the Legend and the Chart when using angular-chart.js?
- How to add text inside the doughnut chart using Chart.js?
- Moving vertical line when hovering over the chart using chart.js
- How can I make two of my lines in Chart JS thicker
- How to add an on click event to my Line chart using Chart.js
- How can I make a stepline or stepped chart in chart.js or D3?
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to Draw Gantt chart using chart js or other libraries
- How to fix chart Legends width-height with overflow scroll in ChartJS
- How to add text in centre of the doughnut chart using Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- How to disable Chart JS tooltip when there is no value?
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to display the labels in doughnut chart using ng2 charts?
- How to create single value Doughnut or Pie chart using Chart.js?
- how to make a chart.js bar chart scrollable
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- how to programmatically make a line chart point active/highlighted
- How to make Chart JS responsive?
More Query from same tag
- Chart.js Cannot read property 'fontSize' of undefined
- How to print angular-chart
- Chart.js v2: How to make tooltips always appear on line chart?
- How to update css for doughnut chart with ng2-charts
- Chart js pie chart, darker shade for higher value and lighter shade for lower value. I'm displaying values monthly
- Doughnut spacing
- The 3rd dataset not showing in canvas
- Cannot get Chart.js working
- chart.js Adding Percantage Sign on Tooltip
- How to use two Y axes in Chart.js v2?
- ChartJs line chart - display permanent icon above some data points with text on hover
- Responsive ChartJS in Bootstrap Table Cell
- Chart.js - Is it possible to have two y axis with positive values one above the other?
- ChartJS xAxis label position
- How to change font size, padding of chart title only, in chart.js 3.x
- How to hide some points inside my line graphic in React ChartJS 2?
- Chart.Js : How to change the color of a point, based on a third data
- Adding Vertical lines to charts
- Bar chart legend adjustments - Chart JS
- how to show several labels and data's in the chart.js similar to npmtrend website?
- Chart.Js is keeping old data after AJAX call
- React input to filter to chart. How convert a hardcoded number into a variable?
- Chart.js add label inside bubble chart
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- Unable to set Global Options in Chart.js
- Chart.js : sparser clickable data points
- how can i reset chartjs object all instances and recreate it from scratch?
- How to display data from top to bottom in stacked bar-chart QuickChart?
- multiTooltipTemplate in Chart.js 2.0
- Can not read property 'Concat' of Undefined