score:4
Accepted answer
you need to change the style of the text before writing it down.
if you take a look at the fillstyle
doc on mdn :
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color or style to use inside shapes.
so it will have an effect on the next shapes (such as text via filltext
).
you need to change the style of the text before writing it down.
using the same function you put in your question :
var filltext = function(x, y, legenditem, textwidth)
{
// we store the current fillstyle
var prevfillstyle = ctx.fillstyle;
if (legenditem.hidden) {
// if the item is hidden, we change the fillstyle to red
ctx.fillstyle = "red";
}
// the legend label is written here
ctx.filltext(legenditem.text, boxwidth + (fontsize / 2) + x, y);
if (legenditem.hidden) {
// we comment the stroke part -- as you did
//ctx.beginpath();
//ctx.linewidth = 2;
//ctx.moveto(boxwidth + (fontsize / 2) + x, y + (fontsize / 2));
//ctx.lineto(boxwidth + (fontsize / 2) + x + textwidth, y + (fontsize / 2));
//ctx.stroke();
// and then we put the fillstyle back to its previous value
ctx.fillstyle = prevfillstyle;
}
};
score:0
i found a better way doing that:
add onclick to legends and put this :
const index = legenditem.datasetindex;
const ci = legend.chart;
const isvisible = ci.isdatasetvisible(index);
ci.setdatasetvisibility(index, !isvisible);
// this is where the stroke remove happens
const ci = legend.chart;
const filltextvalue = ci.ctx.filltext;
ci.ctx.filltext = function filltext(x, v, b) {
filltextvalue.bind(ci.ctx, x, v, b)();
this.fillstyle = "rgba(0,0,0,0)"; // whatever color you like
};
ci.update();
Source: stackoverflow.com
Related Query
- How to change color of hidden legend item instead of strike-through in Chart.js
- How to change the color of legend in chartjs and be able to add one more legend?
- How to change color of column in chart js
- change legend item style when dataset is hidden
- How to change background color of labels in line chart from chart.js?
- How to change color by clicking on the chart bar?
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- How can i give the full Legend a background color in chart js?
- how to change point style legend to diamond in chart js
- How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?
- How to change label color of ng2 chart in angular
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- How set color family to pie chart in chart.js
- chartjs datalabels change font and color of text displaying inside pie chart
- chart js how to fill legend box with colour
- Chart js. How to change font styles for "labels" array?
- How to change the color of Chart.js points depending on the label
- How do I change the 'months' language displayed on the date axis in Chart JS?
- How to change line segment color of a line graph in Chart.js?
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- how to set chart.js grid color for line chart
- Chart js: how can I align the legend and the title
- ChartJS -- How do I change scale color when I have to scales?
- Change border color on legend in Chart.js
- chart.js bar chart color change based on value
- Angular 8 & ChartJs change color in pie chart
- How to show tooltip on legend item in chart.js
- How to set single color on each bar in angular chart js
- How to change Chart.js horizontal bar chart Width?
- How to change the label color in chart.js?
More Query from same tag
- Chart.js: Dynamic Changing of Chart Type (Line to Bar as Example)
- Hover event in graph Chart.js
- Dynamic multiple charts in chart.js with dynamic data inside them
- Is it possible to reverse the display order of segments in polar chart?
- React Js and Chart Js (Line Chart)
- React-chartjs-2 update height dynamically
- How to call back one js file from another js file?
- HTML how block elements to not go over footer etc
- How to include chart js annotations in ember?
- chartjs - Not taking the height in reponsive chart
- Chartjs v2.0: stacked bar chart
- Set max value of chart.js bar chart
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- Angular 2 ng2-charts donut add text
- How to show Charts.js lables
- ChartJS display legend
- how to set color for each datapoint in chartjs-chart-treemap
- Chart js :Adding onclick event on slice of doughnut chart is not working in react-chartjs-2
- How to use output of JSON.parse() as a input of HTML charts' data field?
- ChartJS replay chart animation when called by show()
- How to create a fixed number of y axes for a chartsjs linear graph?
- Completely hide empty bars in chart.js
- Legend position is not vertically in middle in Donut chart
- angular-chart not showing Pie Chart
- Displaying Chart with data retrieved from Entity Framework in Controller
- How to adjust Chart.js height according to datasets size. Ionic 3
- 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
- ChartJS onclick fill area (Radar Chart)
- Escape symbol '<%=' and '%>'
- Chartjs - resize an image positioned in a column