score:0
Accepted answer
1) set 2 labels for each sub category within a category 2) for each bar within a category, add the value if it matches the label position, then add 0 to the value for the alternative sub category not matching the label position
this will produce a bar chart where each category only has 1 bar of a colour gradient unique to that subcategory.
you may need to play around with the bar sizing, since i only have 2 sub categories, i set
scales: {
xaxes: [{
barpercentage: 8,
categorypercentage: 0.1
}]
}
}
and it aligned with the category label closely enough for me.
Source: stackoverflow.com
Related Query
- How do I get a different label for each bar in a bar chart in ChartJS?
- How to custom index label on each bar chart using chartjs?
- In chart.js bar chart, how do I label each bar within a category?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- PrimeNg bar chart how to show a label for the y-axis
- How to set single color on each bar in angular chart js
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- How to use set the color for each bar in a bar chart using chartjs?
- how to label axis within radar chart with chart.js
- How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels
- How to set X coordinate for each bar with react chart js 2?
- How to remove a label in top of bar in chartjs chart
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- How to add additional label in the middle of each bar using ChartJS
- how to write labels along with data on top and bottom of each stack in bar chart
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- How to set Solid label in bar chart using Chart JS
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to add label square to Bar Chart using Chart.js
- How to set different colors in each stacked bar chart cell?
- How to set percentage value by default on each bars in horizontal bar chart js
- how to create bar chart with group and sam color for each group using chart.js?
- chart js 2 how to set bar width
- Chart.js Bar Chart - how to chart bars from 0
- How to put rounded corners on a Chart.js Bar chart
- chartjs : how to set custom scale in bar chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
More Query from same tag
- Adding hours and minutes to a date object for time axis
- Legend option destroys pie chart in Chart.js
- How to resize chartjs in bootstrap columns for different browsers
- ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels
- PrimeFaces: ChartJs stacked bar chart label removal
- Assigning data structures to chartjs properties, NOT individually
- Trying to get total sum based on months on ApexCharts with Php
- Chart.js line graph-removing labels on the line
- How to draw High-Precision-Numbers in chartjs
- Calculate x and y coords for bullet trajectory - Chart.js
- Chart.js how to set start and end values to plot
- Chart.js canvas is empty / white in node.js
- Datas put one on each other on chart.js
- ChartJS Datalabels plugin and negative numbers
- How to change text colour of specific labels of axis in Chart JS?
- ChartJS add tooltip to a grouped bar chart
- Chart.JS plugin, draw after animation
- How to skip labels on x-axes?
- Scatter chart in chart.js
- Rails chart.js data coffee script
- Chartsjs only showing two data points
- Why aren't my data points getting placed in the corresponding locations in my chart?
- Adding a chart-js plugin to vue-chart-js
- function not return values
- Chart.js how to highlight a part of a label
- chart.js v3 - data decimation not working with zoom plugin
- Change line point to triangle in Chart.js
- angular-chart.js doughnut chart : how to show data in the center of a chart
- Placing canvas (chart.js line chart) inside an SVG using d3.js
- Change the font size of chart.js with chartkick