Custom Labels and titles for different axis and series

Custom Labels and titles for different axis and series

Posted by: abhatt on 5 May 2020, 3:34 am EST

• 

  abhatt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 May 2020, 3:34 am EST - Updated 3 October 2022, 4:25 pm EST

  Using the css properties it addes custom color to all the labels and title of the series.
  
  Code:
  
  .wj-flexchart .wj-axis-y .wj-title{
  
  fill:rgb(251, 178, 88) ;
  
  }
  
  .wj-flexchart .wj-label{
  
  fill:rgb(251, 178, 88) ;
  
  }

  → Is there a way to add different custom color to individual the labels and title of the different series and axis?. The above code adds the properties to all the elements of the flexchart consisting of multiple axis as shown in the image.

  

  2344×768 106 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 May 2020, 1:24 am EST

  Hi,

  For formatting different axis labels and legend items, you will need to customize their host elements directly. Please refer to the sample below for reference:

  https://stackblitz.com/edit/angular-zqsbql

  Regards,
  
  Ashwin

• 

  abhatt

  • Post Options:
  • Link
    Copy

  Posted 6 May 2020, 3:11 pm EST

  Hello,

  The code demo in the response is related to angular, could you show the same using react.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2020, 1:29 am EST

  Hi,

  Please refer to the link below for the sample in react:

  https://stackblitz.com/edit/react-arkq7p

  ~regards