score:0
Without being confident that this is the simplest solution, I provide some example where I use a second axis, containing labels for the groups, but in a scaled-up array, for correct alignment.
The only problem is that if you enable rotation for the group maxRotation>0
, the text will always be rotated, since (due to scaling) it is bound to a very small area.
https://jsfiddle.net/h6z4apvo/
var myData = [
["ABC212","Toyota Corolla","Toyota",1.95],
["ABC212","Toyota Yaris","Toyota",1.94],
["ABC212","Totyota Etios","Toyota",1.93],
["ABC212","Honda City","Honda",1.93],
["ABC212A","Honda Brio","Honda",1.91],
["DEF311","Toyota Camry","Toyota",1.90],
["DEF310","Toyota Prius","Toyota",1.82],
["DEF310","Ford Explorer","Ford",1.85],
["DEF310","Ford Endeavour","Ford",1.83],
["DEF305","Ford Fugo","Ford",1.79]
];
/*Calculates group labels to a scaled array so that they can align better*/
function calculateGroupLabels(data){
const scaleFactor=100;
var labels = _(data)
.groupBy((elem)=>elem[0])
.map((entriesOnSameGroup, key)=>{
var newSize = entriesOnSameGroup.length*scaleFactor;
var newArray = new Array(newSize);
newArray[0]="";
newArray[newArray.length-1]="";
newArray[parseInt((newArray.length-1)/2)]=key;
return newArray;
}).flatten().value()
return labels;
}
var labels = calculateGroupLabels(myData);
var ctx = $("#c");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: '# of Votes',
xAxisID:'modelAxis',
data: myData.map((entry)=>entry[3])
}]
},
options:{
scales:{
xAxes:[
{
id:'modelAxis',
type:"category",
ticks:{
//maxRotation:0,
autoSkip: false,
callback:function(label, x2, x3, x4){
console.log("modelAxis", label, x2, x3, x4)
return label;
}
},
labels:myData.map((entry=>entry[1]))
},
{
id:'groupAxis',
type:"category",
gridLines: {
drawOnChartArea: false,
},
ticks:{
padding:0,
maxRotation:0,
autoSkip: false,
callback:function(label){
return label;
}
},
labels:labels
}],
yAxes:[{
ticks:{
beginAtZero:true
}
}]
}
}
});
score:1
I have made such graph in my POC , where I used :
data: {
labels: ["ABC212", "ABC212A",...],
datasets: [
{
label: "ABC212",
data: [val1, val2,....]
}, {
label: "ABC212A",
data: [val3, val4,...]
}
]
}
Source: stackoverflow.com
Related Query
- Chartjs - data format for bar chart with multi-level x-axes
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS bar chart fixed width for dynamic data sets
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- ChartJS not showing data for time series bar chart
- ChartJS fails to render horizontal bar chart for timeseries data
- Angular with ng2charts for bar chart shows NAN% when no data present
- Use multi data to draw chart with chartjs
- Chartjs Bar Chart showing old data when hovering
- ChartJS - Draw chart with label by month, data by day
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- ChartJS bar chart with legend which corresponds to each bar
- Border radius for the bar chart in ChartJS
- ChartJS bar not showing up for simple data points
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJS:align zeros on chart with multi axes
- Grouping the object by key for Chartjs bar chart
- Show "No Data" message for Pie chart with no data
- How to remove bars for those bars with zero value in Chartjs bar chart?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to create chartjs chart with data from database C#
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- How to display chart using Chartjs with JSON data in Laravel
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- Chartjs with Vue, Bar Chart Border Radius not working
- Bar chart with min height and zero values - ChartJs
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
More Query from same tag
- Chartjs - onAnimationComplete fires before the animation actually completes
- Chart.js how to show cursor pointer for labels & legends in line chart
- Fix number distributions after scaling the range
- react chart js, title is not displayed
- Creating a heart rate monitor
- Vue Chart.js -- can I give a line chart a default value for missing data?
- Display Chart.js chart in Node.js
- Setting Common labels and background color common for all the charts in ChartJs
- Padding Between Pie Charts in chart js
- Django Serializers - Return the sum of values by filter
- ChartJS creating var takes each character and outputs undefined
- React-chartjs-2 update height dynamically
- Chartjs Barchart without borders
- Chartjs doughnut chart with gradient color
- How do I change the grid line style on the Y axis in Chart.js?
- How can I add dataset toggle to Chart.js?
- CharJS : Is it possible to display stacked bar chart with positive scale on both sides of 0 index
- chart.js Radar shows 0 when value is 12
- Add dynamic data in a demo chart.js file of a django template
- chart.js increase value on click
- How to check chart type on Chart.js
- Vue js component and Chart js
- How to combine lines with different starting points in chartjs
- Some imports are missing in ng2-charts@3.0.8
- ChartJS: how to change data in hover box?
- ChartJS : How to display two "y axis" scales on a chart
- chart.js draw custom grid lines
- Can we have number value on the top of charts bars.?
- How to dynamically update Chartjs legend label colors?
- Vue.js - this.<value>.<value> is undefined