You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
and here is my TanStack React Charts code for the data visualization. Let say, you had an electric bike rental business, and you want to know how much usage each unit gets based on the data in TanStack Table. First, catch the list of electric bike codename in name column with getFacetedUniqueValues (In my case, the electric bike codename is in third column, so i wrote 2 in the column index). Then, create a data variable for the charts and using for each to search the value of mapped codename, and push it to data array. Last, define the axis for the codename and the amount of usage of electric bike per codename to visualize it.
//Declare typestypeDailyTransaction={codename: stringcount: number|undefined}typeTSeries={label: stringdata: DailyTransaction[]}// Declare variable to save list of electric bike codenameconstcontrollerNames: string[]=Array.from(table?.getAllColumns()?.map((column: any)=>column.getFacetedUniqueValues())[2]).map((item: any)=>item[0]);// Declare variable for data to create chartconstdata: TSeries[]=[{label: 'Electric Bike Usage Statistic',data: [],},];// Mapping the list of electric bike codename, and search the amount of usage according to the filtercontrollerNames.forEach((name)=>{constcodenameCount: number|undefined=table.getFilteredRowModel().rows?.filter(cell=>cell.getValue("codename")===name).length;data[0].data.push({codename: name,count: codenameCount,});});// Declare axis for electric bike codenameconstprimaryAxis=useMemo((): AxisOptions<DailyTransaction>=>({getValue: datum=>datum.codename,}),[]);// // Declare axis for number of uses electric bike constsecondaryAxes=useMemo((): AxisOptions<DailyTransaction>[]=>[{getValue: datum=>datum.count,},],[]);
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello, i would to share how to create a dynamic bar chart with a single filter. First, here is my filter component
and here is my TanStack React Charts code for the data visualization. Let say, you had an electric bike rental business, and you want to know how much usage each unit gets based on the data in TanStack Table. First, catch the list of electric bike codename in name column with getFacetedUniqueValues (In my case, the electric bike codename is in third column, so i wrote 2 in the column index). Then, create a data variable for the charts and using for each to search the value of mapped codename, and push it to data array. Last, define the axis for the codename and the amount of usage of electric bike per codename to visualize it.
Beta Was this translation helpful? Give feedback.
All reactions