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
- drawing line chart with chartjs
- chartJS pie chart not updating after axios GET
- ChartJS - TypeError: Cannot read property '_model' of null - Angular
- to increase space between x axis and first horizontal bar in chart js
- Chart.js line graph data not displaying
- Reload chart on api call
- In chart.js bar chart, how do I label each bar within a category?
- Chart js custom single tooltip not working
- My canvas/graph jumps to left after creating the object
- display data on chart.s
- Chart.js V2. bar chart with a fixed y-axis
- My ChartJS dates don't show up correctly from coinranking API
- Dates not displaying on X Axis using Chart.Js on MVC 5
- Creating a stacked budget Vs Actual chart
- Proper way to use a counter variable in HTML/Javascript
- Embed unique identifier in Chart.js segments?
- How to show bar labels in legend in Chart.js 2.1.6?
- chartjs tooltip html: Use data to populate tooltip
- Chart from Database
- function returns undefined in AngularJS
- Chart.js how to use scriptable options
- Chart JS add max value to legend
- ChartJS: Fixed width for data-part, the rest for labels
- Using Google Analytics raw data to display graph by month
- chartjs-plugin-dragdata isn''t working with scatter charts
- how to set chart.js grid color for line chart
- chartjs tooltip is cut off when out of canvas
- How do I add padding on the right of tooltip, but not the left in Chart.js?
- Dynamically change type with react-chartjs-2 React
- Chart js loading screen