score:1
Accepted answer
this is because, you have placed the plugins
array, inside your chart options, while it should be followed by (outside) your chart options.
here is the working version of your code :
var mainlabels = ["jose 12", "jose 13", "jay 12", "jay 13", "rob 12", "rob 13"];
var salesbyperson = [21, 31, 21, 16, 22, 24];
var ctx = document.getelementbyid('canvasone').getcontext('2d');
var chart = new chart(ctx, {
type: 'bar',
data: {
labels: mainlabels,
datasets: [{
label: 'sum of sales',
backgroundcolor: 'rgba(0, 129, 214, 0.8)',
data: salesbyperson
}]
},
options: {
tooltips: {
callbacks: {
label: function(t, d) {
if (t.datasetindex === 1) {
var xlabel = d.datasets[t.datasetindex].label;
var ylabel = t.ylabel + '%';
return xlabel + ': ' + ylabel;
} else if (t.datasetindex === 0) {
var xlabel = d.datasets[t.datasetindex].label;
var ylabel = t.ylabel >= 1000 ? '$' + t.ylabel.tostring().replace(/\b(?=(\d{3})+(?!\d))/g, ",") : '$' + t.ylabel;
return xlabel + ': ' + ylabel;
}
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yaxes: [{
ticks: {
beginatzero: true,
callback: function(value, index, values) {
if (parseint(value) >= 1000) {
return '$' + value.tostring().replace(/\b(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
},
plugins: [{
beforedraw: function(chart) {
var labels = chart.data.labels;
labels.foreach(function(e, i) {
var bar = chart.data.datasets[0]._meta['0'].data[i]._model;
var datapoint = e.split(/\s/)[1];
if (datapoint === '12')
bar.backgroundcolor = 'blue';
else if (datapoint === '13')
bar.backgroundcolor = 'green';
});
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>
<canvas id="canvasone"></canvas>
Source: stackoverflow.com
Related Query
- Charts.JS Bars Not Alternating Color
- Alternating bars in bar chart in chart.js are not labelled
- how to not repeat code while creating multiple charts in chart js
- ChartJS Line Charts - remove color underneath lines
- Bootstrap 3 tabs & Chart.js - charts not loading on tabs
- chartjs + Angular6 is not showing charts or any error
- Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)
- Chart.JS Mixed Chart - Bars Not Showing
- Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
- Chart looks only grey, does not show the color - Chartjs,discordjs
- chart.js color not rendering
- Charts js not showing
- Multiple charts on same page not working - ng2-charts
- ChartJS charts not generating within tabs
- Why chart.js charts are not plotting data in Safari (works in Chrome)
- Angular2 charts (chart.js) Labels not vertical even though option is set
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- How to add multiple background color in line charts
- charts are not being show with wicked_pdf
- Chart.js Ionic 2 Angular2: Background color of bar graph not changing
- chartjs plugin datalabels does not show value on charts
- ChartJS: Horizontal Bar with multiple datasets not showing Bars
- Chart.js - Draw charts with opposite bars - How to set both the y-axis ends to positive number?
- Setting Common labels and background color common for all the charts in ChartJs
- How to retain spacing between bars for two different bar charts in Chart.js 2
- Multiple charts not working chart.js
- Charts not showing in wicked pdf
- code works fine on jsfiddle but one function is not working on website
- Chartjs not working with d3 from csv source
- Chart.js: Chaing Font Color and Size not working
More Query from same tag
- Chart.js using json data
- Chart.js dynamically-created charts do not obey chart options
- Charts.js line chart: Show the most recent date on x-axis when setting ticks.maxTicksLimit
- AmCharts: Clustered bar chart with sub-categories
- How to disable chartjs legendclick
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Draw points and lines inside a bar in bar chart
- Uncaught TypeError: fn is not a function in chart.js
- Why are the chartjs tooltip labels always showing the first x-axis label?
- setting chart.js stacked bar chart data dynamically
- Bootstrap modal not working with chartjs line graph
- Chart.js & BPopUp - Make a Chart in a PopUP
- Chart js, pie chart remove borderradius
- Chart works uncorrectly chart.js
- Is there a JavaScript Method/ Function to loop Objects via Keys into a array?
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- Using map reduce in javascript
- Chart.js - Getting data from HTML
- How i can refresh chart without refresh page?
- How to make Chart JS ignore the scale between DatasSets
- Why is chart.js not working with angular JS
- Style individual points from one dataset in Chart.js
- Draw a Chart.js with ajax data and responsive. A few problems and questions
- TimeSeries scale in ChartJS 3.0.2. brings error "This method is not implemented: either no adapter can be found or an incomplete integration was ..."
- Error with Chart.js : TypeError: t is undefined
- Issues with ng2-charts
- Is it possible to create context menu with chart.js?
- ChartJs - Round borders on a doughnut chart with multiple datasets
- Chart.js Types of property 'type' are incompatible. Type 'string' is not assignable to type '"line" | "bar" | "scatter"
- Remove background on Chartjs v2 fixed tooltips