score:3
You can attach the logic to your onchange handler
document.getElementById("mySelect").onchange = highlightBar.bind(document.getElementById("mySelect"));
and if you want to call it programmatically (say, if you have an initial value set)
document.getElementById("mySelect").onchange();
Here's the logic for highlighting the bars. Note that you need to consider the fact that the tooltip functionality also manipulates fill colors and stroke colors.
function highlightBar(s) {
// this clears off any tooltip highlights
myBarChart.update();
myBarChart.activeElements = [];
// reset any coloring because of selection
myBarChart.datasets.forEach(function(dataset) {
dataset.bars.forEach(function (bar) {
if (bar.selected) {
bar.fillColor = bar.selected.fillColor;
bar.strokeColor = bar.selected.strokeColor;
delete bar.selected;
}
})
});
var index = myBarChart.scale.xLabels.indexOf(this.value);
myBarChart.datasets.forEach(function (dataset) {
var selectedBar = dataset.bars[index];
// store the current values
selectedBar.selected = {
fillColor: selectedBar.fillColor,
strokeColor: selectedBar.strokeColor
}
// now set the color
selectedBar.fillColor = "red";
selectedBar.strokeColor = "red";
});
myBarChart.update();
}
If however, you don't have tooltips enabled, it becomes a whole lot simpler and you don't need some of the above logic.
Working Fiddle - http://jsfiddle.net/39owabm0/198/
Source: stackoverflow.com
Related Query
- How to highlight single bar in bar chart using Chartjs
- How Can I Get An Instance of a ChartJS Bar Chart Using Angular
- How to add vertical line in bar chart using chartJs and ng2-charts?
- chartjs : how to set custom scale in bar chart
- How to create stacked bar chart using react-chartjs-2?
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- Chartjs - show elements in all datasets on hover using bar chart
- How to create single value Doughnut or Pie chart using Chart.js?
- How to draw Horizontal line on Bar Chart Chartjs
- Multiple stacked bar chart using ChartJs
- How to set single color on each bar in angular chart js
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- how to highlight bar in ChartJS with onkeyup Input
- How to use set the color for each bar in a bar chart using chartjs?
- How to display chart using Chartjs with JSON data in Laravel
- Pagination in Bar chart using ChartJS
- how to highlight a specific area on chartjs line chart
- How to draw multiple color bar in a bar chart using chart.js
- How to update a chart using VueJS and ChartJS
- Bar Chart Not Stacking When Using ChartJs
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How to get Data from API to display chart using chartjs in Vuejs
- How to get the data attribute of the canvas chart created using chartjs
- How to show the chartjs bar chart data values labels as text?
- How to hide/show bars differentiate by a colors and by click on labels, using chartjs bar charts?
- Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point
- How do I display two datasets on a single chart with chartjs
More Query from same tag
- Chart.js: Display Custom Tooltips, always visible on stacked bar-chart
- How can I make my backgroundColor in Chart.js match up with a reversed order y axis?
- Chart.js canvas resize
- Chart.js not working properly to draw lines when is only 1 bar
- UnitStepSize for regular time interval with Chartjs
- Chartjs in Vue integrate parsed Json Data
- Tooltips not working in chart.js. Any ideas?
- Chart.js Picture inside doughnut segment
- How we embed google analytics chart from google analytic with angular 4?
- Chart.js: evenly distribute ticks when using maxTicksLimit
- Chart.js add icon at the top of bar
- How to ensure that a Chart.js line chart uses all space available on the y-axis?
- I want to multiply chart data according as array length
- Using epoch as time series on x axis in react-chartjs-2 not showing correct date
- Detect onHover being complete on a Chart.js doughnut chart
- How to use generated HTML legends to enable or disable datasets in Chart.js
- How to pass dynamic values as objects inside data in line chart?
- ChartJS - Injecting data from the server-side
- Stacked bar chart with chartjs with included values
- Revert tooltip order
- How to set defaults for scales in ChartJS?
- Why Chart.js v2 time based data not aligning with X axis correctly?
- Bar chart from Vue-chartjs doesn't render
- Vue.js chart not working?
- Chart.js canvas cuts off doughnut stroke
- How can i create a background of moving graphs like chartsjs?
- Chart js error in angular: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. Fix?
- Vue JS setting data collection in component
- How to set X coordinate for each bar with react chart js 2?
- Drawing chart with Chart.js filled with data gotten per JsonRPC