Jump to content
JChartFX Community
  • 0
niravbhatt

Chart section is not showing correct color shading

Question

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

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...