score:1
Accepted answer
the x and y axis are no arrays anymore in v3, all scales are an object and you define the place with the position
argument, also you dont specify the id in the object but the object key is the id
example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.js"></script>
<canvas id="mychart" width="400" height="400"></canvas>
<script>
var ctx = document.getelementbyid("mychart").getcontext("2d");
var mychart = new chart(ctx, {
data: {
labels: ["person 1", "person 2", "person 3", "person 4", "person 5", "person 6", ],
datasets: [{
type: "line",
label: "earnings",
xaxisid: "a1",
data: [10000, 20000, 30000, 5000]
},
{
label: "cat 1",
xaxisid: "b1",
type: "bar",
backgroundcolor: ["rgba(255,59,59, 0.2)"],
bordercolor: ["rgba(255,59,59, 1)"],
borderwidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "cat 2",
xaxisid: "b1",
type: "bar",
backgroundcolor: ["rgba(241,85,54, 0.2)"],
bordercolor: ["rgba(241,85,54, 1)"],
borderwidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "cat 3",
xaxisid: "b1",
type: "bar",
backgroundcolor: ["rgba(235,106,55, 0.2)"],
bordercolor: ["rgba(235,106,55, 1)"],
borderwidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "cat 4",
xaxisid: "b1",
type: "bar",
backgroundcolor: ["rgba(227,131,53, 0.2)"],
bordercolor: ["rgba(227,131,53, 1)"],
borderwidth: 1,
data: [0, 0, 32.012777777778, 0, 0, 29.378611111111, ]
},
{
label: "cat 5",
xaxisid: "b1",
type: "bar",
backgroundcolor: ["rgba(221,171,54, 0.2)"],
bordercolor: ["rgba(221,171,54, 1)"],
borderwidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "cat 6",
xaxisid: "b1",
type: "bar",
backgroundcolor: ["rgba(218,199,52, 0.2)"],
bordercolor: ["rgba(218,199,52, 1)"],
borderwidth: 1,
data: [0, 44.195555555556, 0, 0, 38.79, 0, ]
},
{
label: "cat 7",
xaxisid: "b1",
type: "bar",
backgroundcolor: ["rgba(192,224,66, 0.2)"],
bordercolor: ["rgba(192,224,66, 1)"],
borderwidth: 1,
data: [0, 0, 0, 14.921666666667, 0, 0, ]
},
{
label: "cat 8",
xaxisid: "b1",
type: "bar",
backgroundcolor: ["rgba(124,236,93, 0.2)"],
bordercolor: ["rgba(124,236,93, 1)"],
borderwidth: 1,
data: [40.216666666667, 0, 0, 0, 0, 0, ]
},
]
},
options: {
responsive: true,
maintainaspectratio: false,
indexaxis: "y",
scales: {
a1:
{
display: true,
position: "top",
type: "linear",
title: {
text: "cost",
display: true,
},
beginatzero: true,
id: "a1",
},
b1: {
id: "b1",
position: "bottom",
title: {
text: "hours",
display: false,
},
beginatzero: true
},
y: {
display: true,
stacked: true,
}
}
}
});
</script>
Source: stackoverflow.com
Related Query
- Stacked Mixed Horizontal Bar Chart in Charts.Js Axes Positioning
- Horizontal stacked bar chart with chart.js
- Stacked horizontal bar chart along total count with chart.js
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How do I create a stacked horizontal bar chart with Chart.js in React?
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Drawing a horizontal line on a stacked bar chart on hover (chart js)
- Horizontal stacked angular bar charts
- Draw stacked horizontal bar chart with Average line using ChartJS
- ChartJS: Is this horizontal stacked bar and line graph multiaxis chart even possible?
- Chartjs v2.0: stacked bar chart
- Horizontal bar chart in chart.js
- Vertical stacked bar chart with chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Click event on stacked bar chart - ChartJs
- How to create stacked bar chart using react-chartjs-2?
- Chart.js Mixed Bar and Line chart with different scales
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- How to display inline values in a stacked bar chart with Chart.js?
- Creating a horizontal bar chart extension on Chart.js
- Showing Percentage and Total In stacked Bar Chart of chart.js
- How to draw Horizontal line on Bar Chart Chartjs
- chart.js: Place tooltip for stacked bar charts on top of bar
- Stacked bar chart results in misaligned bars
- Multiple stacked bar chart using ChartJs
- two xAxes horizontal bar chart Charts.js
- Display Date Label in axes - chart js/ng2 charts
More Query from same tag
- How To Add Center-Text in Donut Chart Js
- setting QuickCharts color
- Modifying the X-Axis Labels of a Scatterplot in Chart.js 2
- Radar Chart, Chart.js v3.2 labels customization
- Padding Between Pie Charts in chart js
- Chart.js Pie Chart
- ChartJS 'Hello World' not animating
- Chart.js zeros handling
- chart.js not working in browser with django. no error for template and static folder setting
- What is the syntax for require.config for chartjs-plugin-streaming and dependencies using RequireJS?
- Vue pie chart show after a while (like show console with a warning)
- Chart.js - Connect two datasets in a line chart at same y value
- ChartJS: Percentage labels
- When using chart.js to draw a line chart, if the peak is between two x values instead of "at a x value"
- Chart.js positive/negative values fill with out twist
- Reference external JS method in Chart.js callback using Chartjs.ror
- Highlight last clicked bar in ChartJS
- How to update a chart using VueJS and ChartJS
- Chart.js with wrong Y axis
- Chartjs: Custom text on y axis at certain level
- how to reduce list chart to one and use select dropdown to show selection without refresh page?
- How to use chartjs-plugin-trendline with react-chartjs-2
- How to create an animate-on-update Stacked Bar chart using Chart.js(or Chartist)?
- How to align ticks label in chartJS 3.x?
- Chart.js: Truncate Legend's Labels
- Use fetch to get JSON Data for Chart JS
- How to make bars dashed in chart js?
- How to disable click in graph ChartJS
- Create Vue.js + Chart.js charts using datasets stored outside in a csv file
- Eror: chart.min.js:13 Uncaught (in promise) Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused