Question 73896 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to show Ag Grid Bar Sparkline in RTL (Right to Left) – Reactjs

Anyone have suggestion or ever worked on Ag grid sparkline bar chart

From this example we can display % Bars in Left to Right direction but I have another column for the same category to show % Bars in Right to Left direction, so that two percentages can be compared

Example:
https://www.ag-grid.com/react-data-grid/sparklines-bar-customisation/#example-bar-sparkline-progress-bars

I want to show exactly above in rever direction for another column

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have explored few options in the AgGrid for this kind of implementation but could not find anything specific. So I got a work around to solve this problem, by changing the data shape a bit to show bars left to right & right to left, where these columns will be next to each other to compare.

    After few hours of investigation, created the sample, which is as below. The code does the trick is defining the right data & valueAxiDomain prop in the ColDefs

    Output: enter image description here

    Code

      ----data.js---
  ***right to left bar***
  change: [40]
  
  ***left to right bar***
  change: [-20]


  ----index.jsx-----   
  ***left to right bar*** 
  valueAxisDomain: [0, 40],
  ***right to left bar*** 
  valueAxisDomain: [-40, 0],

    Working Version: Ag grid with Bar SparkLine Comparison


  2. 0

    If you can skip labels or put labels in a separate column, then with css transform: scaleX(-1) it flips the bar horizontally.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search