score:1
Accepted answer
if i understand well, you don't want stacking all the data in the same group, but the 'stack' parameter is the same for each data set. in the docs the 'stack' parameter identify a group id for combining multiple data. i suggest you split the data in different groups.
// create a canvas into the loaded .php page
var canvas = document.createelement('canvas');
div = document.getelementbyid('container');
canvas.id = "mychart";
canvas.style.zindex = 8;
div.appendchild(canvas);
const labels = [
'8',
'9',
'11',
'14',
'17',
'21',
'8',
'9',
'11',
'14',
'17',
'21',
];
const data = {
labels: labels,
datasets: [{
label: 'my fourth dataset',
backgroundcolor: 'rgb(255,0,0)',
bordercolor: 'rgb(255,0,0)',
data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
stack: 'combined',
type: 'bar'
},
{
label: 'my fifth dataset',
backgroundcolor: 'rgb(255,255,0)',
bordercolor: 'rgb(255,255,0)',
data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
stack: 'combined',
type: 'bar'
},
{
label: 'my sixth dataset',
backgroundcolor: 'rgb(255,159,64)',
bordercolor: 'rgb(255,159,64)',
data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
stack: 'combined',
type: 'bar'
},
{
label: 'my seventh dataset',
backgroundcolor: 'rgb(224,224,224)',
bordercolor: 'rgb(224,224,224)',
data: [3, 2, 5, 2, 2, 5, 8, 3, 2, 5, 2, 2, 5, 8],
stack: 'combined',
type: 'bar'
},
{
label: 'my first dataset',
backgroundcolor: 'rgb(30,144,255)',
bordercolor: 'rgb(30,144,255)',
data: [1, 10, 5, 2, 20, 30, 145, 1, 10, 5, 2, 20, 30, 45],
stack: 'combined_first',
},
{
label: 'my secound dataset',
backgroundcolor: 'rgb(165,42,42)',
bordercolor: 'rgb(165,42,42)',
data: [1, 10, 5, 2, 20, 30, 145, 1, 10, 5, 2, 20, 30, 45],
stack: 'combined_second',
},
{
label: 'my third dataset',
backgroundcolor: 'rgb(80,80,80)',
bordercolor: 'rgb(80,80,80)',
data: [3, 2, 5, 2, 2, 5, 5, 3, 2, 5, 2, 2, 5, 8],
stack: 'combined_third',
}
]
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'chart'
}
},
scales: {
y: {
stacked: true
}
}
},
};
const mychart = new chart(
document.getelementbyid('mychart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>
Source: stackoverflow.com
Related Query
- line charts is higher that the dataset in Chart.JS
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- data in charts of charts.js is changing when I click in the line chart
- How to ensure that a Chart.js line chart uses all space available on the y-axis?
- Chart.js - How to set a line chart dataset as disabled on load
- Chart Js Change Label orientation on x-Axis for Line Charts
- Remove the vertical line in the chart js line chart
- Moving vertical line when hovering over the chart using chart.js
- Chart.js line chart is cut off at the top?
- How to display Line Chart dataset point labels with Chart.js?
- chart js tooltip how to control the data that show
- How to align Chart.JS line chart labels to the center
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- ChartJS Line chart cut off at the top and bottom
- Rotate 90 degrees clockwise the scaleLabel (no ticks or labels) on a Chart.js line chart
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to dynamically set ChartJs line chart width based on dataset size?
- Chart.js - Color specific parts of the background in a line chart
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How to create a chart that uses strings for both the X and Y axes?
- chart.js add second line in a Line chart that starts from end of first line
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- Having problems getting a line chart in Chartsjs to go *up* to 1, with bkg fill *under* the chart line
- Tooltips in Chart js are always black instead of the color of the corresponding dataset
- Chart JS: Always show tooltips in a multi dataset line chart
- Chart.js -> line chart -> multiple points with the same X
- How to change the chart line or area colors according to the user need?
More Query from same tag
- How to create datasets dynamically for chart.js Line chart?
- How can I automatically rescale the y axis of my log chart using ChartJS?
- Remove the label and show only value in tooltips of a bar chart
- Editing Chart.js legend template
- Chart JS Tooltip - place it in a fixed location outside the canvas
- Chart.js how to resend animation command to a chart?
- Make pie chart smaller Chart JS
- impressions in google analytics is zero while sessions and users are more
- JQuery Datatables overlapped when using column filtering
- Canvas not rendering after animation without resizing viewport
- Is there a way to display legend's data over the chart in chart.js?
- Chart.JS - Polar area - Legend hover style and margin
- Creating multiple canvas patterns fails
- Using chart.js with laravel passing data from controller to view
- Plotting jqplot points to a chart.js chart
- Setting axis scales in ChartsJS
- How can I use an array of {x,y} objects to make a chart?
- Chart bundle js is not showing dynamic data
- Chart.JS add dataset from hidden input
- Canvas Emptied but Reappears
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- Chart.js: trouble with resizing on window resize
- Labels (category type) on left and right of bar chart using chart.js?
- Chart.js : Controller for Scatter chart doesn't work for draw function
- pan on chart.js also zoom on line charts
- Chart.js - Creating multiple charts on one page
- How to make a chart scroll horizontally (when using Chart.js)
- function not return values
- How to know which stack is clicked, in a grouped stacked bar (chartjs)?
- How to change font weight of footer in tooltips in Chart JS