Different colors for bars in same series of a grah

Different colors for bars in same series of a grah

Posted by: srikanth on 25 January 2021, 5:58 am EST

• 

  srikanth

  • Post Options:
  • Link
    Copy

  Posted 25 January 2021, 5:58 am EST

  Hello Spread JS Team

  In graphs, from what I understand , it appears that same color can be used for different bars in the same series. Is it possible to change the color for bars based on the values , even though they belong to same series.

  Regards
  
  Srikanth

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 27 January 2021, 3:53 am EST

  Hi Srikanth,

  You may use columnStacked ChartType for the required functionality. Please refer to the following code snippet and attached sample that demonstrates the same.

  
  var chart = sheet.charts.add(
      sheet.name() + "Chart1",
      GC.Spread.Sheets.Charts.ChartType.columnStacked,
      30,
      100,
      900,
      400,
      "A1:E5",
      GC.Spread.Sheets.Charts.RowCol.rows
    );
  
  

  sample: https://codesandbox.io/s/quizzical-yalow-e6u67?file=/src/index.js:617-622

  Charts Demo: https://www.grapecity.com/spreadjs/demos/features/charts/chart-types/column-chart/purejs

  Regards
  
  Avinash

• 

  srikanth

  • Post Options:
  • Link
    Copy

  Posted 1 February 2021, 1:11 am EST

  Hi Avinash
  
  Thanks for your reply
  
  I was more looking at having bar graph, but having different color for each bar for each element of X-Axis
  
  Say X-Axis is gadgets such as Mobiles, Laptops
  
  Y-Axis is revenue in units of 100

  Mobile Phones 9415 5875
  
  Laptops 5868 2646

  For sales <3000 color is red
  
  For sales>3000 and <6000 color is blue
  
  For others its green

  So in above case Mobile phases will have green and blue
  
  Laptops will have blue and red
  
  So color is dependent on value for the entire bar Please let me know if this is possible

  Regards
  
  Srikanth

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 3 February 2021, 4:56 am EST

  Hi Srikanth,

  This feature is currently not supported by SpreadJS. We have made an enhancement request on your behalf. We will update you regarding this as soon as we get any information. The internal ID for this issue will be SJS-7508.

  Regards
  
  Avinash

• 

  srikanth

  • Post Options:
  • Link
    Copy

  Posted 4 February 2021, 5:29 am EST

  Thanks Avinash for confirmation, Will look forward for the enhancement
  
  Regards
  
  Srikanth