score:1
well after some mixed tutorials and guides, i came with the solution
piechart.js:
import react,{ component } from 'react';
import {chart} from 'react-chartjs-2';
class piechart extends component {
constructor(props){
super(props)
this.chartreference = react.createref();
this.state = {
data:[]
};
}
async componentdidmount(){
const url = "https://api-tesis-marco.herokuapp.com/api/v1/questiondata/"+this.props.title;
const data = await fetch(url)
.then(response => response.json());
this.setstate({data:data});
var datasets = [{data: this.state.data.map(d=>d.count),
backgroundcolor: this.props.colors
},
{
data: this.state.data.map(d=>d.percent)
},
{
data: this.state.data.map(d=>d.who)}]
this.mychart = new chart(this.chartreference.current,{
type: 'pie',
data:{
labels: this.state.data.map(d=>d.answer),
datasets: [{
data: datasets[0].data,
backgroundcolor: datasets[0].backgroundcolor
}]
},
options: {
title: {
display: true,
text: this.props.title,
fontsize: 20,
fontstyle: 'bold'
},
legend: {
position:'right'
},
tooltips:{
callbacks: {
title: function(tooltipitem, data) {
return 'respuesta:'+data['labels'][tooltipitem[0]['index']];
},
label: function(tooltipitem, data) {
return 'total:'+data['datasets'][0]['data'][tooltipitem['index']];
},
afterlabel: function(tooltipitem) {
var dataset = datasets[1];
var total = dataset['data'][tooltipitem['index']]
return '(' + total+ '%)';
}
},
backgroundcolor: '#fff',
titlefontsize: 16,
titlefontcolor: '#0066ff',
bodyfontcolor: '#000',
bodyfontsize: 14,
displaycolors: false
},
onclick: clicked
}
});
function clicked(evt){
var element = this.getelementatevent(evt);
if(element[0]){
var idx = element[0]['_index'];
var who = datasets[2].data[idx];
alert(who);
}
}
}
render(){
return(
<canvas ref={this.chartreference} />
)
}
}
export default piechart;
as you can see i only set an datasets array outside
var datasets = [{
data: this.state.data.map(d=>d.count),
backgroundcolor: this.props.colors
},
{
data: this.state.data.map(d=>d.percent)
},
{
data: this.state.data.map(d=>d.who)}]
this contains all the datasets of the request, then in the chart instance i only pass the dataset i want to plot, then for my question, in the clicked function only call the element of the array wich contains the list of users for the specific answer
cliked function:
function clicked(evt){
var element = this.getelementatevent(evt);
if(element[0]){
var idx = element[0]['_index'];
var who = datasets[2].data[idx];
alert(who);
}
}
i made a custom tooltip as well, but i have an issue with this(with the default tooltip is the same) because i use this component to plot 4 piecharts but when i hover the mouse only 2 of the 4 charts show me the tooltip, the 2 chart who shows the tooltip are random (when refresh localhost pick randomly 2 of the 4 charts), and i don't know what is happend or how to fix this, i hope this is usefull to someone
Source: stackoverflow.com
Related Query
- Printing a list by clicking chart Chart js + react
- how to update dropdown list by clicking the update button in react
- React add class to one element from list after clicking on button
- React - Adding an item to a list from an input by clicking submit button
- React Closing dropdown menu on selecting a list item or clicking outside the component
- clicking nested list item also clicks parent react js
- How to display the menu list when clicking on the hamburger icon in react
- React Spring translate animation not working and clicking on a list item seems to be delayed
- A filtered list in React flashes for a split second the whole list while clicking on an item
- Pretty Printing JSON with React
- Big list performance with React
- How to render rectangles in a D3 grouped bar chart using React Faux DOM?
- Scrollable List Component from Material-UI in React
- React Router work on reload, but not when clicking on a link
- React performance: rendering big list with PureRenderMixin
- Dynamically changing number of columns in React Native Flat List
- React - What's the best practice to refresh a list of data after adding a new element there?
- Filtering A List With React
- React list rendering wrong data after deleting item
- How to add new elements without re-rendering whole list with React
- React - Deleting from middle of list removes last element instead
- How to sort list of React components based on different properties?
- Display a component on clicking a button in React
- How to display different list of items when clicking on a category
- React and Redux: Managing Redux Custom Middleware List
- how to get list of all registered synthetic event handlers/listeners for a React Component?
- How to avoid re-rendering the whole List instead of adding the new item to the DOM list in react JS?
- React ES6: Get selected value in dropdown list using semantic UI
- Add text inside doughnut chart from chart js-2 in react
- How to add pagination to a long list using React MaterialUI?
More Query from same tag
- Export pure functional component without decorators
- Component did update works only after second click
- Any way to use immutable.js with lodash?
- How to watch if the querystring changes within React Router v6?
- React JS Context API: Access Input Value From Another Component
- UI react capybara button click test
- How to disable the button once clicked in antd table?
- Upload image through a react app to a mongodb data base with mongoose
- React functional component reinitialises local functions and variables on re render (React Hooks)
- React - Using Conditional Rendering with window.location.href to change Background image
- Filtering array of objects if specific key contains search term
- Is there an efficient way to load current location to react state?
- Unexpected token - Webpack 2.2.0 and SCSS
- How to make react router Link load page like anchor tag?
- Fetch polyfill in React not completely working in IE 11
- Firebase with react .on listener not working
- How to connect nginx to local mongodb
- react map is not a function error in my app
- Problems accessing react event handler on renderedValue component using Material UI
- Pass function as a prop in react, Cannot read property '_handleEvent' of undefined
- How to store the page number in ReactJS (not in state) to construct the GET URL with page number from 1 to 5
- React JS sorting issue
- React - Redux; .map function duplicates Array sometimes
- How to disable dates in React nice dates?
- How to set two loops in React JS
- react what is the esiest way to acces the locale
- React class is not defined (text/babel)
- Add a maximum number of days with react-dates
- Reactjs how to add variable in URL parameter
- How to setup firewall on ubuntu for digital ocean?