score:0
please read the documentation to understand how the data is populated.
all the properties in labels
corresponds to what is to be shown in the xaxis in your case it is inverted.
the number of items in the datasets corresponds to the legend and the label
property of each dataset
is used as the text for the legend.
please see the changes code as per my understanding of your problem or fiddle -> https://jsfiddle.net/bcxzu39v/
var mesecontext = document.getelementbyid("mesestatuscanvas").getcontext("2d");
var mesedata = {
labels: [
"amer",
"apac",
"emea"
],
datasets: [{
label: ['sfo'],
data: [23.2, 0, 0],
backgroundcolor: 'red'
},
{
label: ['chi'],
data: [6.3, 0],
backgroundcolor: 'brown'
},
{
label: ['india'],
data: [0, 3, 0],
backgroundcolor: 'green'
},
{
label: ['anz'],
data: [0, 7, 0],
backgroundcolor: 'lightgreen'
}
]
};
var mesechart = new chart(mesecontext, {
type: 'horizontalbar',
data: mesedata,
options: {
responsive: true,
scales: {
xaxes: [{
stacked: true,
}],
yaxes: [{
stacked: true,
}]
}
}
});
Source: stackoverflow.com
Related Query
- Unable to get the expected legend shown in chart js
- React ChartJS 2 : Get data on clicking the chart
- Chart js: how can I align the legend and the title
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- How to get the actual chart width and height in chart.js
- Angular chart how to show the legend data value by default along with legend name
- Chart.js xaxis formatter changes the value shown in the chart
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Legend isnt moving to the right on my doughnut chart created with chart.js
- ChartJS: Get individual values minus another value in the custom legend
- How to get the data attribute of the canvas chart created using chartjs
- I cant get Legend to work for my chartjs donut chart
- How can i give the full Legend a background color in chart js?
- Doughnut chart from Chart.js, custom legend and call of original handler not works as expected
- Modify the legend of a double doughnut with chart js
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How to get rid of the line on top of every point on a line chart (Chart.js)
- How to remove the Legend of chart from angular Chart.js
- How to get the X position at a specified chart item index?
- Chart js legend are being cut off if the bar height is equal to port height - chart js
- Unable to change the legend symbol to rounded square in chartjs in React
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- Chartjs: get the label title on the radar's chart tooltip
- Chartjs + DataLabelPlugin: Suddenly data labels are shown in every chart even without the plugin?
- How do I get the current step size of a chartjs chart whose stepSize I have not defined?
- Chart js: I'm getting the labels crossed on my pieChart and doughnut. Not able to get the chart itself
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- Chart.js unable to render the chart with data reactjs
- React-chart does not render the legend for PIE chart
More Query from same tag
- How to ignore points with same value in Chart.js
- ChartJS: get points information on hovering the points
- How can i hide label data on chart.js tooltip content?
- chartjs radar glowing edges effect
- Chart.js - How to display all bars as different datasets(same behaviour as doughnut)
- How to hide section in a Chart.js Pie Chart
- How to show a "total" sum label on the top of stacked bars
- How can i retrieve and override presets chart.js option in angular selector?
- Data Labels on top of points in line charts
- ChartJS separate charts per JSON object, and not when hovered over
- Chartjs numbers on bar chart flash on hover
- chart js stripline? like one from canvas
- Chart.js: Chaing Font Color and Size not working
- Limit data points with chart js in React
- Loop through array for chart.js input
- Chart.js not showing in Android 8.0/Android O
- is there anything wrong with this If Condition in Javascript code?
- Testing Chart.js Plugin with React and Jest/Enzyme
- Change axes position in line chart
- chart.js streaming data plugin data format or config error
- react chart js skip zero value month
- Get data from dynamic ID for Chart.js
- React JS Chart JS 2 is not hiding the grid lines in the background
- How to add an input box next to Chart.js y axis label?
- Chart.js: Truncate Legend's Labels
- chart.js:4 Uncaught ReferenceError: require is not defined in ionic 2
- How to update chart at the end of every for loop in Chart.js?
- How can I get two stacked chart.js charts to be different types?
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- Chart.js move x axis labels to the right