score:2
Accepted answer
given an array
of number
values named "data", you create a sorted array out of it. then you map
the values of the original data, returning the appropriate color depending on its position in the sorted array
.
const backgroundcolors = data.map(v => sorteddata.indexof(v) >= data.length - 3 ? 'red' : 'green');
please have a look at the runnable code sample below.
const labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'k', 'l', 'm', 'n', 'o'];
const data = labels.map(l => math.floor(math.random() * 1000) + 1);
const sorteddata = data.slice().sort((a, b) => a - b);
const backgroundcolors = data.map(v => sorteddata.indexof(v) >= data.length - 3 ? 'red' : 'green');
new chart(document.getelementbyid('mychart'), {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: "my dataset",
data: data,
backgroundcolor: backgroundcolors
}]
},
options: {
legend: {
display: false
},
scales: {
yaxes: [{
ticks: {
beginatzero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart" height="90"></canvas>
Source: stackoverflow.com
Related Query
- chart.js bar chart color change based on value
- chart.js bar chart change color based on value
- Chart Js - Globally set bar chart color based on value
- Unable to change y-axis value dynamically based on data for Stacked bar chart in reactjs
- How to change line segment color based on label value in chart.js?
- How to use segment property to color line / border color based on value in chart js?
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- Change bar color depending on value
- chart js bar chart add animation to change color
- chart.js label color change based on value
- Chart JS change pointBackgroundColor based on data value
- Chart JS - Change the color of the last element in a Bar Chart
- Chart.js Change color of the values *inside* the bars of a Bar chart
- How to change bar color acording to label value in chartjs
- Chartjs Bar Chart add background color to value labels
- Cannot change the color of column chart according to its value
- Chart js bar with the highest value is a different color among the rest - React
- How to make bars change color based on value in chartsjs
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- Change Step Area Color Based on Value
- Change Vertical Line and Color bar chart in bar chart.js
- chartjs datalabels change font and color of text displaying inside pie chart
- Chart.js change color of Bar
- Chart.js bar chart : Grid color and hide label
- Different color for each column in angular-chartjs bar chart
- angular-chart.js bar chart with 100% opacity color
- Remove the label and show only value in tooltips of a bar chart
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- ChartJS click on bar and change it's background color
More Query from same tag
- ChartJS update chart with multiple datasets
- ChartJs days of the week from numbers
- vb.net string to chartjs data field?
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- Draw horizontal lines in Chart.js 2.0
- Building Chart.js master - generated .js gives errors
- In reactjs doughnut chart, How to reduce the width of the chart
- Time format on the x axis in Chart.js
- Chart.js change height on window resize while maintaining aspect ratio
- Using JSON file data in Chart.js
- Destroying Chart js within useEffect - React
- ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels
- Change background point color at runtime for angular ng2-charts / chartjs
- chart.js - problems with axes options - what am I doing wrong?
- Tooltips displaying "rgb(0,0,0)" instead of label value on bar chart
- How to create logarithmic scale in chart.js with normal numbers?
- Is it possible to make ChartJS X-Axis an automatic day based on data and formatted to month?
- Chart Js function (Chart.js) is stuck in a loop
- Is there a way to add html markup to target each column individually in Chartjs/Canvasjs?
- Y Axes not displaying properly on Chartjs
- How to install Chart.js in Laravel?
- Ionic2: Use chartjs inside ion-segment
- Chart.js and Angular - Click Event on Chart
- Chart.js line graph data not displaying
- Not drawing null values using chart.js
- chart.js How to show last column’s value on y axios?
- Is there a way to change the react-chart-js tooltip only on a graph?
- ChartJS with React: Only one value showing on time chart
- Array data not rendering in data table using this.props - ReactJS
- Display multiple datasets from array with chart.js