score:2
Idea is to find the dataset object corresponding to the plot line you want to change, update its borderWidth
property, then call chart.update()
.
Below is an example, pay attention to the onHover
function.
var config = {
type: 'line',
options: {
tooltips: {
mode: 'nearest',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: false
},
// LOOK AT ME!!! I'M SO IMPORTANT!!!
onHover: function onHover (evt, activeElements) {
if (!activeElements || !activeElements.length) return;
var datasetIndex = activeElements[0]._datasetIndex;
var activeDataset = this.data.datasets[datasetIndex];
activeDataset.borderWidth = 5;
this.update();
},
},
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'BlueLine',
fill: false,
backgroundColor: window.chartColors.blue,
borderColor: window.chartColors.blue,
data: [57, 66, 17, 23, 16, 38, 60, 25, 5],
}, {
label: 'RedLine',
fill: false,
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: [23, 6, 32, 57, 38, 17, 19, 7, 23],
}]
},
};
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
Source: stackoverflow.com
Related Query
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How to change background color of labels in line chart from chart.js?
- How can I change background color of a specific area in my chart's grid using Chart.js and Annotation?
- How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- Change Vertical Line and Color bar chart in bar chart.js
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- chartjs datalabels change font and color of text displaying inside pie chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to change the color of legend in chartjs and be able to add one more legend?
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How to change line segment color of a line graph in Chart.js?
- How can I create a time series line graph in chart.js?
- how to set chart.js grid color for line chart
- Chart js: how can I align the legend and the title
- Can we draw a Line Chart with both solid and dotted line in it?
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How to show data values in top of bar chart and line chart in chart.js 3
- How can I make line on chart thinner?
- How can I change color of only one column in Barchart using Chart.js
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to change line segment color based on label value in chart.js?
- How to add area with break on line chart with fill color
- Change Axis Line color in Chart created using chart.js
- How to use segment property to color line / border color based on value in chart js?
- change stroke line color in chart according to datasets in react native
More Query from same tag
- How to get item what been clicked on Chart (primeNg chart + angular application)
- How i can insert string data to diagrams in chart.js
- Limit labels number on Chart.js line chart
- How to detect when Tooltip closes in chart.js?
- ChartJS - rolling twenty minute view
- Chartjs Stacked bar chart not displaying correctly
- How to get the data attribute of the canvas chart created using chartjs
- how to get React chartjs to resize back down with window
- chart.js with JSON Data on Same page not displaying
- donut chart not rendering with csv data chart.js
- Charts.js scales yaxes ticks min max doesnt work
- Multiple charts on same page not working - ng2-charts
- How to change chart.js chart's grid color?
- Chart js: bar width
- Why is my Line Chart.JS starting in the middle?
- turn off point values in radar chart
- How to provide empty values for Chart.js data?
- Chartjs 1 to n relationship
- ChartJS - Override Attributes (AngularJS)
- Chart.js x axis date-time formatting fails
- Chartjs - How to get last 7 days on x-axis labels?
- Angular 6 Charting Google Sheets API Data
- ChartJS add text to canvas in linechart
- How to set lower limit for the highest value being displayed on Y Axis?
- ChartJS - Time graph from JSON
- How can I create a horizontal scroll effect with angular-chart.js and chart.js
- Can you add an action to an element within the tooltip in chart.js?
- ChartJS '_meta' error for AJAX Dataset
- gap between half doughnut chart and container div
- Chart.JS tooltip callbacks label and title (v3.5)