score:0
i found another way to preselect a segment, basically you can simulate a click event on the point. you can find in the dataset model the position x and y. here you can find my solution:
function simulateclick(x, y) {
const clickevent = document.createevent('mouseevents');
clickevent.initmouseevent('click', true, true, window, 0, 0, 0, x, y,
false, false, false, false, 0, null);
document.elementfrompoint(x, y).dispatchevent(clickevent);
}
function initactivepoint(index) {
const activepoint = mychart.data.datasets[0]._meta[0].data[index];
simulateclick(activepoint._model.x, activepoint._model.y);
}
initactivepoint(0);
score:5
setting a segment's hover style is a bit confusing because its not really documented anywhere. nevertheless, i was able to figure it out a while back when i wanted to highlight a segment when it's legend label was hovered.
to do this, you need to use the pie chart .updatehoverstyle()
prototype method and pass in the segment you want highlighted. the chart segments are stored in the _meta
object in an array where each segment index matches the position of each value in your chart's data array.
here is an example (assuming your chart instance is stored in a var called mypie
.
// get the segment we want to highlight
var activesegment = mypie.data.datasets[0]._meta[0].data[segmentindextohihlight];
// update the hover style
mypie.updatehoverstyle([activesegment], null, true);
// render so we can see it
mypie.render();
you just need to define what segment you want to highlight and store it in a var called segmentindextohihlight
and it should work.
here is a codepen example demonstrating this. note, i purposely did not highlight the segment on load (i wait 3 seconds) so that you can see the change occur.
Source: stackoverflow.com
Related Query
- Chart.js set active segment on initialize
- Set height of chart in Chart.js
- In Chart.js set chart title, name of x axis and y axis?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- Set minimum step size in chart js
- How set color family to pie chart in chart.js
- Chart.js line chart set background color
- chartjs : how to set custom scale in bar chart
- Chart JS - set start of week for x axis time series
- set background color to save canvas chart
- Chart.js Pie Chart: How to set background image for segment
- set y-axis scale manually in a bar chart using angular-chart.js
- how to set chart.js grid color for line chart
- Mouse over on line chart data active other data-set in Chart.js
- How do you set pie chart colors in angular-chart.js
- How to dynamically set ChartJs line chart width based on dataset size?
- How to set single color on each bar in angular chart js
- ng2-charts: How to set Title of chart dynamically in typescript
- Chartjs - Set start and end value into a Bar Chart
- How to use segment property to color line / border color based on value in chart js?
- How do I set a bar chart to default to a suggested maximum in chart.js v1.01?
- Set minimum number of steps in line chart
- Charts.js: Load new data set to an existing chart
- How to use set the color for each bar in a bar chart using chartjs?
- Cannot initialize a pie chart with Chart.js
- Initialize a Chart.js chart with data from an api
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- How to set a time scale to a ChartJS chart from JSON?
More Query from same tag
- Chartjs: how to remove datapoint info from label?
- How to know which stack is clicked, in a grouped stacked bar (chartjs)?
- How to edit the ID of each button in a class if a condition is true in JavaScript?
- Refreshing scope variable not working with scope function
- How to draw the circular progress bar in Chart.js Or any other JavaScript library in Angular 2
- Get last 6 month name in Array for Chartjs
- Gradient is too blurred in Chart.js Line Chart
- Cannot zoom in Chart.js
- chartjs - Drawing vertical line on integer x axis value
- ChartJs: Different color fill between points makes lines straight...need curves (lineTension)
- ChartJS: add a clickable text in title
- How to chnage this value theHour[0].times into time format (HH:mm) using moment.js
- Chart.js tooltips callback function with pie charts
- how to setting chart js customization
- Trying to create chartjs constructor
- Chart is disappearing during # link
- chart.js load totally new data
- Cant change labels in Chart.js 2.0 Beta
- Chart.js updating data
- donut chart tooltip under center text
- Use data from SQL database in .js file with PHP
- Cross Browser Support for Chart.js
- Using Different Colors In a Chart
- Remove zero values from tooltip
- Chart.js Radar chart multiple datasets
- how to plot multiple time series in chartjs where each time series has different times
- Draw line on Chart.js bar
- Ng2-charts set color for one specific value in dataset
- canvas fill text vanishes when hovering over chartjs pie chart
- PrimeFaces PolarArea Chart - GridLine Color Change