score:0
i went round and round trying a range of different implementations to solve this very problem for myself while using ng2-charts (incidentally it is how i found this question). i ended up adding an @viewchild to reference my chart that was defined in the html.
references needed in the ts for this workaround:
import { component, input, host, oninit, ondestroy, viewchild, afterviewinit } from '@angular/core';
import { chartsmodule, basechartdirective } from 'ng2-charts';
added to the top of my class in the ts:
export class statisticscomponent implements oninit, ondestroy {
@viewchild('mychart') mychart : basechartdirective;
the html object for the chart using ng2-charts:
<canvas *ngif = "loaded"
basechart
#mychart = 'base-chart'
[datasets]="chartdata"
[colors]="chartcolors"
[charttype]="'line'"
[labels]="chartlabels"
[options]="chartoptions"
[legend]="true"
(chartclick)="onchartclick($event)">
</canvas>
in the method you then use for overriding the legend onclick (i personally did it in the chartoptions) you can add this line of code:
this.chart.data.datasets[legenditem.datasetindex].hidden = !this.chart.data.datasets[legenditem.datasetindex].hidden;
this.chart.update();
this replicates the standard "onclick" of the legend item so you dont need to bother storing the original function. probably important to mention that in this code the legenditem is the second parameter from the onclick (with the first being the event):
function(e: any, legenditem: any)
the only issue with this fix is that by default, in ng2-charts the .hidden artibute is not exposed by default so i had to do a little hack in the module following this method: https://github.com/valor-software/ng2-charts/issues/915.
while i appreciate your question does not relate to ng2-charts. i imagine that you could likely use a similar method in your wrapper. at the very least i figured that after i managed to sort my problem that i would share with you what i did :)
Source: stackoverflow.com
Related Query
- ChartKick - ChartJs - Legend onClick override with default behaviour
- How to trigger ChartJS legend onClick with out interrupting its normal working
- Custom Legend with ChartJS v2.0
- ChartJS bar chart with legend which corresponds to each bar
- Unable to hide Legend in Chartjs with PrimeFaces7.0
- Angular chart how to show the legend data value by default along with legend name
- ChartJS options with Chartkick
- Chartjs not working with d3 from csv source
- Chartjs Custom Legend with Time on Y-axis
- Order and hide items of legend by value with Chartjs Angular
- Change data onclick with ChartJS
- Legend color not working with randomly generated background colors in chartjs pie chart
- ChartJS Pie Chart How default just show 2 legend datas
- Updating Chartjs to 2.5 with custom code
- Chartjs doughnut with multiple dataset issue in legend creation
- trouble with legend on chartjs
- How to make a interactive legend with chartjs
- how to highlight stack bar in ChartJS with onclick
- Chartjs - Changing legend as a line with pointsyle of circle?
- Overwrite Default ChartJS Variables with Webpack
- issue with legend boxes in ChartJS
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ChartJS - Draw chart with label by month, data by day
- Display line chart with connected dots using chartJS
- react-chartjs-2 with chartJs 3: Error "arc" is not a registered element
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Show bar with zero value in ChartJs v2
- Chartjs linechart with only one point - how to center
- How to fix chart Legends width-height with overflow scroll in ChartJS
More Query from same tag
- colors are not updated when updating chart
- ChartJS - Time graph from JSON
- React chart.js dynamic data update not rendering
- How can I query data from my Cosmos DB in Angular 7?
- Chart.js load new data
- Add shadow Chart.js
- chartjs dataset from single line to multiple line
- ChartJS ignoring TailwindCSS styling
- Display JSON data in react-chartjs-2
- How to get line x value from Label chart js
- How can I change the position of legends in chart.js?
- Angular-chart.js - Make line chart does not curve
- Show statistics in my diagram (php mysqli)
- using chart-dataset-override option in angular-chart.js
- How to get labels on ChartJS Pie chart segments
- Angular-chart / line chart with multiple horizontal lines (margins)
- How can I display a set amount of ticks on the Y Axis?
- Chart js plugin annotation not working in vue
- Replace chartjs data
- Display PHP Array in Chart.js tooltip
- Prevent chart.js "jumping"
- Chart.js - How to update data
- ChartJs won't appear in DIV in same page
- How to add label square to Bar Chart using Chart.js
- Chart.js x-axis time doesn't show values when using combined (mixed) charts
- legend not displayed for radar Angular-chart.js
- How can I ensure that my charts diagram load every time I choose it from my dropdown?
- Charts .js update when array changes
- Adding a Title to a Chart.js line graph
- Chart.js change legend toggle behaviour