Chart section is not showing correct color shading

[niravbhatt]

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);

 

 

[JuanC]

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

 

 

[niravbhatt]

Hello,

I got your options. but my issue is chart must be fill with #ffdb99. But it is actually filling with another color. You can see my code snippet.

Thanks in advance

[JuanC]

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