CSS for formatting the reference lines of a line chart

[JK_10744682]

@Jam_Kirko 

Could you possibly share the CSS for changing a reference line color if you still have it--from this topic?  

[Surya_Tiwari]

Hi @JK_10744682   

• Beginning with ThingWorx Platform 9.3.4, configuring different colors for reference lines is possible through Custom CSS code
  • Use the @supports CSS statement to include a ptcs-style-unit within a web-component when plain or shadow parts CSS does not work
  • Refer to Applying Custom CSS Styling to Web Component Widgets in ThingWorx Platform 9.3.4+ for more details
  • Example CSS codes beginning in ThingWorx 9.3.4:

@supports (ptcs-style-unit: "PTCS-CHART-COORD") {
  [part~="refline"]:nth-child(1){
    background-color:yellow;
  }
  [part~="refline"]:nth-child(2){
    background-color:red;
  }
}

[JK_10744682]

This is very helpful. Do you know of a way to get the colors to be by reference line number rather than coordinates? I want specific reference lines to be certain color but the CSS you showed has it so that the highest value line is one color and so on. 

[Sathishkumar_C · Accepted solution]

@supports (ptcs-style-unit: "PTCS-CHART-COORD") {
  [part~="y-refline"]:nth-child(1){
    background: repeating-linear-gradient(to right, red, red 4px, transparent 5px, transparent 8px);
    width: 100%;
    height: 2px;
  }
  [part~="y-refline"]:nth-child(2){
    background: repeating-linear-gradient(to right, green, green 4px, transparent 5px, transparent 8px);
    width: 100%;
  }
  [part~="y-refline"]:nth-child(3){
    background: repeating-linear-gradient(to right, blue, blue 4px, transparent 5px, transparent 8px);
    width: 100%;
  }   
  [part~="y-refline"]:nth-child(4){
    background: repeating-linear-gradient(to right, rgb(243 192 17), rgb(243 192 17) 4px, transparent 5px, transparent 8px);
    width: 100%;
  }      
}

Try to use the above CSS.