score:0
Accepted answer
you can make use of the legend onclick
handler like so:
const defaultlegendclickhandler = chart.defaults.plugins.legend.onclick;
const piedoughnutlegendclickhandler = chart.controllers.doughnut.overrides.plugins.legend.onclick;
const options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: 'strength',
data: [12, 19, 3, 5, 2, 3],
bordercolor: 'pink'
},
{
label: 'avg data, %',
data: [7, 11, 5, 8, 3, 7],
bordercolor: 'orange'
}
]
},
options: {
plugins: {
legend: {
onclick: (evt, legenditem, legend) => {
const type = legend.chart.config.type;
if (type === 'pie' || type === 'doughnut') {
piedoughnutlegendclickhandler(evt, legenditem, legend)
} else {
defaultlegendclickhandler(evt, legenditem, legend);
}
if (legenditem.text !== 'strength') {
return;
}
legend.chart.options.plugins.annotation.annotations.line1.display = !legend.chart.getdatasetmeta(0).hidden;
legend.chart.update();
}
},
annotation: {
annotations: {
line1: {
type: 'line',
ymin: 4,
ymax: 6,
bordercolor: 'rgba(234,6,6,0.7)',
borderwidth: 1,
borderdash: [2, 2],
display: true
}
}
}
}
}
}
const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Catch event of show and hide dataset at chart.js
- how to only show zero grid axes at center and hide all other gridlines in chart js
- Chart.js bar chart : Grid color and hide label
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Remove the label and show only value in tooltips of a bar chart
- onClick event to Hide dataset Chart.js V2
- Chart.js LineChart how to show only part of dataset and support horizontal scrolling
- hide dataset by default using Chart.js and a custom script
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Is it possible to use mouseenter and mouseleave event in chart js?
- Chart JS: Always show tooltips in a multi dataset line chart
- How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?
- Chart.js and Angular - Click Event on Chart
- On click event to show name of pie chart slice in chartsJS
- show label inside the chart - angular.js and chart.js
- how to reduce list chart to one and use select dropdown to show selection without refresh page?
- how can i show labels and value in both on bar chart
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- chartjs - show hide specific dataset with click on element outside graph
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- How remove duplicates xAxis labels and show all values on chart
- Histogram like chart with intensity colored columns and per bin opacity to show intensity
- ChartJs multiaxis chart show different label bottom and top
- AngularJS hide and show a char
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
More Query from same tag
- Is there a way to adjust only the bottom padding of a chart's title in Chart.js?
- Stacked bar chart with chartjs with included values
- Chart.js2 Radar, how to configure the label padding/spacing?
- Stacked bar chart starting from 0 - ChartJS React
- How do I remove the y-axis labels from a graph?
- ChartJS set color of Line chart points depending on Y Axis
- Chart JS Re-Animate chart with onclick
- Why is view width working, but not view height? Super new to coding and chart.js
- jQuery - destroy and rebuild chart with original options
- json_encode is not working (anymore)
- How Can customize chartjs doughnut chart border and tooltip
- How to pass model object to javascript function in asp.net Core
- ChartJS remove vertical grid lines one on two
- How to remove excess lines on X axis using chartjs?
- Fill between two lines Chartjs
- Age pyramid chart using chart.js
- Group bar chart in ReactChartJS2 click particular element
- Background color of the graph affects the other graphs too
- How to to change mouse cursor on chart.js doughnut graph?
- Rendering Chart.js Bubble Chart Using Array Data
- React-chartjs-2 - Each dataset needs a unique key
- Two charts using same options, but I need different titles for the charts
- How to show all dates on xAxis between two dates in chart.js
- Modify the information box of the scatter chart in Chart.JS
- Avoid the first GridLine to be dashed on Chart JS
- Chart.js Show labels on Pie chart
- How do I access Chart.js default settings? (& related -- how do I turn the tool tips on?)
- Chartjs with JSP
- How to constantly update y axis using a C# function to update a Live (Streaming) Chart.js Chart in ASP.NET core Web Application Razor Pages
- How to color legend in angular-chart.js