score:1
Accepted answer
instead of setting only one dataset, use one for each distinct data(nepali,...), the down side of this implementation is that you will loss the x label.
var data = [{"0":"nepali","1":"4","sub":"nepali","gpa":"4"},{"0":"english","1":"3","sub":"english","gpa":"3"},{"0":"math","1":"3","sub":"math","gpa":"3"},{"0":"science","1":"2","sub":"science","gpa":"2"},{"0":"social_studies","1":"5","sub":"social_studies","gpa":"5"}]
window.onload = function() {
var subdata = [];
var colors = ['red', 'blue', 'green', 'yellow', 'cyan'];
for (var i in data) {
subdata.push({
label: data[i].sub,
backgroundcolor: colors[i],
data: [data[i].gpa]
});
}
var densitycanvas = document.getelementbyid('student');
var planetdata = {
labels: [''],
datasets: subdata
};
var chartoptions = {
title: {
display: true,
text: 'gpa mark figure'
},
scales: {
yaxes: [{
ticks: {
fixedstepsize: 1,
beginatzero: true
}
}],
},
};
var barchart = new chart(densitycanvas, {
type: 'bar',
data: planetdata,
options: chartoptions
});
}
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js'></script>
<canvas id='student'></canvas>
Source: stackoverflow.com
Related Query
- How to apply each color to each dataset
- How to apply to different bground color for each area in Chart.js
- How to set a full length background color for each bar in chartjs bar
- chart js - Apply different color for each x-axes label
- Chart.js how to set cutoutPercentages for each dataset
- How to set single color on each bar in angular chart js
- how to set color for each item in tooltip with ChartJS
- How to use set the color for each bar in a bar chart using chartjs?
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- how to set color for each datapoint in chartjs-chart-treemap
- How to share same background color for multiple dataset in a chart?
- How to apply gradient color in chart.js?
- Charts.js - How to set custom tooltip text for each dataset
- How to apply image on each bubble in chartjs?
- how to add color to each data in chartjs scatter plot
- Chartjs-plugin: How to add a different color to each label?
- How to run Chart.js samples using source code
- How can I apply hover properties only to the current point not the entire dataset
- how to create bar chart with group and sam color for each group using chart.js?
- Different color for each bar in a bar chart; ChartJS
- Chart.js - How to set a line chart dataset as disabled on load
- How to disable a tooltip for a specific dataset in ChartJS
- Chart.js Line-Chart with different Labels for each Dataset
- How set color family to pie chart in chart.js
- how to plot multiple time series in chartjs where each time series has different times
- How to display Line Chart dataset point labels with Chart.js?
- How to add an offset to a dataset in Chart js
- How to add text at end of each line in charts.js
- How to change the color of Chart.js points depending on the label
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
More Query from same tag
- How can i add min and max range horizontal line in angular-chart.js
- Chart.js two columns on page - left column is squished until page resize
- Chartjs labels position
- Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)
- Can't generate multi-axis combo chart (bar/line) using chart.js 2.7
- Chart.js line chart display decimal values on Y axis
- Chart.js show negative value in the top half
- chart.js with JSON Data on Same page not displaying
- Chart.js multiple columns of data for the same label
- Draw y-axis inside the graph area with chart js
- How to change tooltip direction in Chart.js (2.9.4)?
- Chartjs 2.0 alpha, how to have a static scale for y-axis
- Chart.js generate chart with foreach mvc
- Dynamically creating graphs with jQuery
- laravel query builder with conditions
- How to get the actual chart width and height in chart.js
- How to fix chart looking blurry in ChartJS?
- Change position of Chart.js tick labels
- How to make the last item on the chart js active?
- Chart.JS Chart Not Being Generated
- Chart js custom datalabel from array
- Charts.js is automatically adding comma as thousands separator when it shouldn't
- chart.js in mvc graph are not show
- How to use Chart.js in Angular4?
- How to hide section in a Chart.js Pie Chart
- Json data visualization in Javascript with chartjs
- Can Chart.js Horizontal bar work with time series data?
- Why my buttons does not work?
- Chart.js zeros handling
- Chart JS is using 1,2,3 as y values for my points for the second dataset instead of their passed in labels