score:8
Accepted answer
i worked out how to do this by adding the following to chart options -
[assuming your confidence interval are named xxx_lo
, xxx
, xxx_hi
and appear in chartdata
in that order]
jsfiddle example - https://jsfiddle.net/5fktnv6a/
labels: {
filter: function(item, chart) {
return !item.text.includes('_');
}
},
onclick: function(e, legenditem) { // need to hide index -1 and index +1
let index = legenditem.datasetindex;
let ci = this.chart;
let alreadyhidden = (ci.getdatasetmeta(index).hidden === null) ? false : ci.getdatasetmeta(index).hidden;
let meta_lo = ci.getdatasetmeta(index - 1);
let meta = ci.getdatasetmeta(index);
let meta_hi = ci.getdatasetmeta(index + 1);
if (!alreadyhidden) {
meta_lo.hidden = true;
meta.hidden = true;
meta_hi.hidden = true;
} else {
meta_lo.hidden = null;
meta.hidden = null;
meta_hi.hidden = null;
}
ci.update();
},
Source: stackoverflow.com
Related Query
- Combining multiple legend elements in chart.js
- how to not repeat code while creating multiple charts in chart js
- Chart.js - Increase spacing between legend and chart
- Pie Chart Legend - Chart.js
- Chartjs Bar Chart Legend
- chart js how to fill legend box with colour
- Chart.js - Draw bar chart with multiple labels
- ChartJS bar chart with legend which corresponds to each bar
- Chart JS show multiple data points for the same label
- Chart.js - Add text/label to bubble chart elements without using tooltips?
- Chartjs - show elements in all datasets on hover using bar chart
- Chart.js HTML custom legend issues with doughnut chart
- how to create multiple chart on one component vue
- Chart.js Multiple charts with one common legend
- Chart js: how can I align the legend and the title
- X-axis multiple colored label for bar chart using chart.js
- Increase padding between legend and chart with react-chartjs-2
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- Multiple stacked bar chart using ChartJs
- Multiple line labels for chart js
- Chart.js Radar chart legend label font size doesn't work
- Using Chart.js - Creating Legend for Doughnut Chart
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- Angular chart how to show the legend data value by default along with legend name
- Group Chart with multiple layers in ChartJS
- Is it possible to change pointStyle for elements of a ChartJS bubble chart per dataset?
- ng2 chart multiple chart update
- Chart.js: Pie chart legend "onclick" gets overwritten by "options.onclick" if both are present
- Dynamicly update scatter/line chart in Chart.JS with multiple x/y grids
- Multiple bubble chart datasets for chartjs
More Query from same tag
- On hover bar is overlapped by label chartjs
- Javascript: Showing bedtimes in Chart.js
- Unable to display multiple line charts in javascript
- ChartJS not showing from MySQL
- Visualizing intervals with range bar charts in chart.js
- I want to draw a horizontal line
- updating a chart in chart.JS using a dropdown button
- Y scaling relative to the max value in my ChartJS chart
- Chartjs not working with d3 from csv source
- Unable to display data via Charts.JS
- problem hidding the label in chartjs (ng2chart for angular)
- Chartjs: Need help on drawing a vertical line when hovering cursor
- ChartJs not showing top label
- Chartjs Custom Legend with Time on Y-axis
- Chart.js - Color specific parts of the background in a line chart
- How to change the Y-Axis to show $ in graph
- Show data on top of bar chart in Chart.js v 2.7.1
- Calling MouseLeave chartJs Angular
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- interactive Button doesn't hide the chart as I intended
- Chart.js not showing value on top of bars
- setting uneven tick stepsize spacing with chart.js
- Mobile page loading in "zoomed" state
- Angular 2 ng2-charts doughnut text in the middle?
- ChartJS doesnt display labels provided by Jinja variable
- Accessing data in an associative array in CodeIgniter 3
- Import Financial chartjs
- How to compute x,y values from a click event using x,y pixel coordinates in ChartJS?
- Can't render multiple responsive canvas graphs in different tabs
- Chart.js loading data colors from PHP