Jump to content
JChartFX Community
  • 0
niravbhatt

Chart section is not showing correct color shading

Question

niravbhatt    0

Hi,

I am a JChartFX licence user.

I am plotting chart with color section. I am not getting correct color section as per my provided color code

sectionWarning = new cfx.AxisSection();
sectionWarning.setFrom(currAlertCriticalNo);
Chart1.getAxisY().getSections().add(sectionWarning);
sectionWarning.setBackColor("#ffdb99");
sectionWarning.getGrids().getMajor().setVisible(false);
sectionWarning.getGrids().getMinor().setVisible(false);
sectionWarning.getGrids().getMinor().setTickMark(cfx.TickMark.None);
sectionWarning.getGrids().getMajor().setTickMark(cfx.TickMark.None);
sectionWarning.setTextColor("#ffdb99");
sectionWarning.setText(ruleBuilderWarningList[warningIndex].alertName + $("#widgetAlertWarning").text());
var customWarning;
customWarning = new cfx.CustomGridLine();
customWarning.setValue(ruleBuilderWarningList[warningIndex].alertWarningNo);
customWarning.setText(ruleBuilderWarningList[warningIndex].alertName + $("#widgetAlertWarning").text());
Chart1.getAxisY().getCustomGridLines().add(customWarning);

 

 

sectionError.JPG

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0
JuanC    3

You are probably including our CSS (attributes and/or palette), which means colors are controlled through CSS instead of API, you have 3 options

1) Do not include our palette and attributes CSS, this is recommended if you will need control several colors "dynamically"

2) Make a copy of the used CSS and change it as needed, e.g.

.jchartfx .AxisY_Section {
    fill: #D0C5E3;
    stroke: #D0C5E3;
}

Note that sometimes we generate several classes for an object (you can view this using Inspect in your browser), sections generate a class such as "AxisSection AxisY_Section AxisY0_Section0" to give you a chance to change all axis sections, all Y axis sections or a particular section by index.

3) Most objects (including AxisSection) expose a setTag method that allows you to customize the generated class

sectionWarning.setTag("Warning");

And include the following on either your page or a css included by your page

    .jchartfx .Warning {
        fill: #FFFF00;
    }

Regards,

JuanC

 

 

Share this post


Link to post
Share on other sites
  • 0
JuanC    3

If I run the following code (without using CSS) I get a section from 10 to 14 with a yellowish color (ffdb99)

    chart1 = new cfx.Chart();
    chart1.setDataSource([8,12,14,13,9]);
    var sectionWarning = new cfx.AxisSection();
    sectionWarning.setFrom(10);
    chart1.getAxisY().getSections().add(sectionWarning);
    sectionWarning.setBackColor("#ffdb99");
    sectionWarning.getGrids().getMajor().setVisible(false);
    sectionWarning.getGrids().getMinor().setVisible(false);
    sectionWarning.getGrids().getMinor().setTickMark(cfx.TickMark.None);
    sectionWarning.getGrids().getMajor().setTickMark(cfx.TickMark.None);
    sectionWarning.setTextColor("#ffdb99");
    sectionWarning.setText("Warning");

 

 

I noticed the pink section in your chart but I am not sure if you are using CSS, or if there is extra code that is causing this issue.

If the problem persists, please try posting a small sample that reproduces the problem (include hardcoded data and other customizations, let us know if CSS is being used).

Regards,

JuanC

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×