score:7
Accepted answer
the way to do this, to create multiple items in the datasets, each having data for only one category. you can have one top level label called stock and then create the individual data-sets for each type.
// create a chart.
const ctx = canvas.getcontext("2d");
const chart = new chart(ctx, {
type: "horizontalbar",
data: {
labels: ["stock"],
datasets: [{
label: "apples",
backgroundcolor: "#af7",
data: [math.random() * 100],
},{
label: "oranges",
backgroundcolor: "#fa4",
data: [math.random() * 100],
},{
label: "mangos",
backgroundcolor: "#ff7",
data: [math.random() * 100],
},{
label: "avocados",
backgroundcolor: "#2a7",
data: [math.random() * 100],
}]
},
options: {
responsive: false,
legend: { position: 'top'},
title: { display: true, text: 'fruit in stock'}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<canvas id=canvas height=200 width=500></canvas>
Source: stackoverflow.com
Related Query
- ChartJS bar chart with legend which corresponds to each bar
- ChartJS horizontal chart display legend on each bar
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- ChartJS Bar chart with time scale - Bars overlap with each other
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chartjs Bar Chart Legend
- Chartjs - data format for bar chart with multi-level x-axes
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- Chartjs with Vue, Bar Chart Border Radius not working
- Bar chart with min height and zero values - ChartJs
- How to set X coordinate for each bar with react chart js 2?
- Stacked bar chart with chartjs with included values
- Multi-colored legend stacked bar chart Chartjs
- Legend color not working with randomly generated background colors in chartjs pie chart
- Chartjs v2.7 - combo chart with time-series (financial) data; bar width's are irregular
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- Angular Chartjs Overlapping Bar Chart with Chartjs ver 2.7
- ChartJS Bar Chart not respecting disabled legend when using cdn
- how to write labels along with data on top and bottom of each stack in bar chart
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- ChartJS vertical bar chart - measure percentage of the data in each column based on a specified max
- How to know which bar is clicked on chart.js bar chart with multiple data?
- ChartJS 2.7.3 stacked bar chart with overlap
- Chartjs v3 overlap stacked bar chart with groups
- Draw stacked horizontal bar chart with Average line using ChartJS
- Grouped bar chart having each group with different data using chart.js
- Chartjs Custom Legend for Doughnut Chart Having Labelled Lines Sticking Out of Each Section
- Chart.js manipulate each bar in chart with different labels
- subcategories for each bar in multibar chart using chartjs
More Query from same tag
- Chart.js canvas and chart width gets overwritten when redrawn
- Chart JS Error: Chart is not defined Firefox
- How to install Chart.js in Laravel? ("Uncaught ReferenceError: Chart is not defined")
- Chart.js 2.0 - How to change default appearance of canvas/chart elements
- Editing Chart.js legend template
- How to get data on chart based on selected date (Filtering data Chart JS with datepicker)
- How To get keys(index) of collection in laravel
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- custom ticks in ChartsJS line plot
- Chart.js - bind data in dataset to specific chart labels
- chart.js automatic x axis distributed in time milliseconds
- Chart.js tooltip yAlign
- chart.js version 2.4.0 does not display bars for me
- Reduce size of chart within the canvas
- Align rotated text to left of canvas
- PrimeFaces: ChartJs stacked bar chart label removal
- Angular 13, Chart.js, ng2-chart Update data from API dynamically
- Chart.js Treemap Custom text
- TypeError: CanvasRenderService is not a constructor
- increase the label size of a line chart in chart.js
- Ionic + Angular Charts: Uncaught Error: Chart.js library needs to included
- Do not draw line on condition in ChartJS line chart
- Set backgroundColor of bar-char (chart.js)
- Chart.js 2.0: How to change title of tooltip
- hereChartJS Line Chart with Time Axis
- Line chart using Chart.js
- Multiple ChartJS scripts are not working at the same time
- Grabbing the title in plugin for ChartJS
- Missing Tooltip for some data points using chartjs
- how can we use function of one component into another js file