transparent background

[StatementSolutions]

Currently the widgets with the jChartFx Pie chart background color is tan looking.  How can I make the background color transparent so that one can see the background of the widget

[JuanC]

To remove the background you probably will have to remove or change the border, as some of the borders may paint effects after the background is painted.

 

// Remove the border

chart1.setBorder(null);

 

// If you are NOT using CSS, this should remove the background, you can test a simple page with a chart and change the background-color for the body

chart1.setBackColor("#00FFFFFF");

 

If you are using CSS, you can make the chart's background transparent by modifying the jchartfx palette CSS in use and set the fill-opacity to 0 for the Border attribute, you could also add this inline CSS which should overwrite the one from the palette

 

<style>

.jchartfx .Border {

    fill-opacity: 0;

}

</style>

 

JuanC

[StatementSolutions]

I added  fill-opacity: 0 to the jChartFx CSS file. Below is the CSS file with the changes you recommended.  The tooltip is displayed behind the pie chart.  Please advise.

 

jchartfx.attributes.css:

 

.jchartfx {
    font-family: Arial;
    font-size: 8pt;
    line-height: normal;   
}

.jchartfxToolTip {
    padding: 3px;
    font-size: 9pt;
    font-family: Arial;
    font-weight: bold;
    -moz-border-radius: 3px;
    border-radius: 3px;
    pointer-events: none;
    border-style: solid;
    border-width: 1px;
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
     
}

.jchartfxToolTipVisible {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.jchartfxToolTipHidden {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.jchartfxToolTip2 {
    pointer-events: none;
}

.jchartfxToolTip2Visible {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.jchartfxToolTip2Hidden {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.jchartfx .Attribute {
    stroke-width: 1;
}

.jchartfx .AttributeLine {
    stroke-width: 3;
}

.jchartfx .MarkerHollow {
    stroke-width: 2;
}

.jchartfx .Marker {
    stroke-width: 2;
}

.jchartfx .Border {
    stroke-width: 1;
    fill-opacity: 0;

}

.jchartfx .PlotArea {
    stroke-width: 1;
}

.jchartfx .PlotArea3D {
    stroke-width: 1;
}

.jchartfx .Title {
    stroke-width: 1;
}

.jchartfx .AxisLine {
    stroke-width: 2;
}

.jchartfx .Title {
    font-size: 11pt;
}

.jchartfx .LegendBox {
    stroke-width: 1;
}

.jchartfx .ScrollBar {
    stroke-width: 1;
}

.jchartfx .LoopMarker {
    stroke-width: 2;
}

.jchartfx .EqualizerTop0 {
    stroke-width: 1;
}

.jchartfx .EqualizerTop1 {
    stroke-width: 1;
}

.jchartfx .EqualizerOff {
    stroke-width: 1;
}

.jchartfx .MapContext {
    stroke-width: 1;
}

.jchartfx .MapWater {
    stroke-width: 1;
}

.jchartfx .MapAttribute {
    stroke-width: 1;
}

.jchartfx .MapRoad {
    stroke-width: 1;
}

.jchartfx .MapRoadBack {
    stroke-width: 3;
}

.jchartfx .MapRoad0 {
    stroke-width: 1;
}

.jchartfx .MapRoad0Back {
    stroke-width: 3;
}

.jchartfx .MapRoad1 {
    stroke-width: 1;
}

.jchartfx .MapRoad1Back {
    stroke-width: 0;
}

.jchartfx .MapTranslationArea {
    stroke-width: 1;
}

.jchartfx .GaugeText {
    font-family: Arial;
    font-size: 8pt;
}

.jchartfx .GaugeTitle {
    font-family: Arial;
    font-size: 10pt;
}

.jchartfx .GaugeTitleLarge {
    font-family: Arial;
    font-size: 40pt;
}

.jchartfx .Separator {
    stroke-width: 1;
}

.jchartfx .DashboardTitle {
    font-family: Arial;
    font-size: 11pt;
}

.jchartfx_container, .jchartfx_container *
{  
    font-family: Arial, sans-serif;
}

.jchartfx_container table {
    border:1px solid;
    font-size:8pt;
    margin:45px 5%;  
    width:90%;
    border-spacing: 0px;
    box-shadow: none !important;
}

.jchartfx_container table thead tr th {
    border:1px solid;  
    border-bottom:1px solid;
    text-align: left;
    padding:5px;
    font-weight: normal;
}

.jchartfx_container table tbody tr td {
    padding:5px;
    border:1px solid;
}

.jchartfx_container .labelIndicator {
    text-align:center;
    margin-top: 48px;
    font-size:18pt;
    line-height:1em;
}

.jchartfx_container .label {
    text-align: center;
    font-size: 14pt;
    line-height:1em;
    display: table !important;   
}

.jchartfx_container .smallLabel {
    font-size: 8pt;
    text-align: center;
    vertical-align:middle;
    line-height:1em;
}

.jchartfx .BorderMedium {
    stroke-width: 4;
}

.jchartfx .BorderThick {
    stroke-width: 8;
}

.jchartfx .Border0 {
    stroke-width: 1;
}

.jchartfx .Border1 {
    stroke-width: 1;
}

.jchartfx .Border2 {
    stroke-width: 1;
}

.jchartfx .Border3 {
    stroke-width: 1;
}

.jchartfx .Border4 {
    stroke-width: 1;
}

.jchartfx .Border5 {
    stroke-width: 1;
}

.jchartfx .Border6 {
    stroke-width: 1;
}

.jchartfx .Border7 {
    stroke-width: 1;
}

.jchartfx .StackedLabel {
    font-family: Arial;
    font-size: 8pt;
}

[StatementSolutions]

I also added fill-opacity: 0; to .jchartfx .Border.  The tooltip still apears behind the jchartfx pie chart.  Please advise

 

jchartfx.palette.css

.jchartfx_body {
    background-color: #FFFFFF;
}

.jchartfxToolTip {
    background-color: #282828;
    color: #F0F0F0;
    border-color: #999999;
}

.jchartfxToolTipBorder {
    fill: #FFFFFF;
    stroke: #666666;
}

.jchartfx .Attribute0 {
    fill: #57ACDA;
    stroke: #4281A4;
}

.jchartfx .Attribute0Line {
    stroke: #4281A4;
}

.jchartfx .Attribute0Alt {
    fill: #4281A4;
}

.jchartfx .Attribute1 {
    fill: #93E24E;
    stroke: #6FAA3B;
}

.jchartfx .Attribute1Line {
    stroke: #6FAA3B;
}

.jchartfx .Attribute1Alt {
    fill: #6FAA3B;
}

.jchartfx .Attribute2 {
    fill: #F26C5B;
    stroke: #B65145;
}

.jchartfx .Attribute2Line {
    stroke: #B65145;
}

.jchartfx .Attribute2Alt {
    fill: #B65145;
}

.jchartfx .Attribute3 {
    fill: #F5D34A;
    stroke: #B89F38;
}

.jchartfx .Attribute3Line {
    stroke: #B89F38;
}

.jchartfx .Attribute3Alt {
    fill: #B89F38;
}

.jchartfx .Attribute4 {
    fill: #F89553;
    stroke: #BA703F;
}

.jchartfx .Attribute4Line {
    stroke: #BA703F;
}

.jchartfx .Attribute4Alt {
    fill: #BA703F;
}

.jchartfx .Attribute5 {
    fill: #65C773;
    stroke: #4C9657;
}

.jchartfx .Attribute5Line {
    stroke: #4C9657;
}

.jchartfx .Attribute5Alt {
    fill: #4C9657;
}

.jchartfx .Attribute6 {
    fill: #5ABEC7;
    stroke: #448F96;
}

.jchartfx .Attribute6Line {
    stroke: #448F96;
}

.jchartfx .Attribute6Alt {
    fill: #448F96;
}

.jchartfx .Attribute7 {
    fill: #CE9884;
    stroke: #9B7263;
}

.jchartfx .Attribute7Line {
    stroke: #9B7263;
}

.jchartfx .Attribute7Alt {
    fill: #9B7263;
}

.jchartfx .Attribute8 {
    fill: #5F6775;
    stroke: #484E58;
}

.jchartfx .Attribute8Line {
    stroke: #484E58;
}

.jchartfx .Attribute8Alt {
    fill: #768092;
}

.jchartfx .Attribute9 {
    fill: #E9EA52;
    stroke: #AFB03E;
}

.jchartfx .Attribute9Line {
    stroke: #AFB03E;
}

.jchartfx .Attribute9Alt {
    fill: #AFB03E;
}

.jchartfx .Attribute10 {
    fill: #E04E61;
    stroke: #A83B49;
}

.jchartfx .Attribute10Line {
    stroke: #A83B49;
}

.jchartfx .Attribute10Alt {
    fill: #A83B49;
}

.jchartfx .Attribute11 {
    fill: #6FE4C8;
    stroke: #54AB96;
}

.jchartfx .Attribute11Line {
    stroke: #54AB96;
}

.jchartfx .Attribute11Alt {
    fill: #54AB96;
}

.jchartfx .Attribute12 {
    fill: #ECA63F;
    stroke: #B17D30;
}

.jchartfx .Attribute12Line {
    stroke: #B17D30;
}

.jchartfx .Attribute12Alt {
    fill: #B17D30;
}

.jchartfx .Attribute13 {
    fill: #99D0A0;
    stroke: #739C78;
}

.jchartfx .Attribute13Line {
    stroke: #739C78;
}

.jchartfx .Attribute13Alt {
    fill: #739C78;
}

.jchartfx .Attribute14 {
    fill: #CE8FBE;
    stroke: #9B6C8F;
}

.jchartfx .Attribute14Line {
    stroke: #9B6C8F;
}

.jchartfx .Attribute14Alt {
    fill: #9B6C8F;
}

.jchartfx .Attribute15 {
    fill: #8DC3E0;
    stroke: #6A93A8;
}

.jchartfx .Attribute15Line {
    stroke: #6A93A8;
}

.jchartfx .Attribute15Alt {
    fill: #6A93A8;
}

.jchartfx .MarkerHollow {
    fill: #FFFFFF;
}

.jchartfx .Border {
    fill: #F5F5EE;
    stroke: #DBDBD9;
     fill-opacity: 0;
}

.jchartfx .PlotArea {
    fill: transparent;
    stroke: #DBDBD9;
}

.jchartfx .PlotArea3D {
    fill: #F5F5F2;
    stroke: #DBDBD9;
}

.jchartfx .CustomGridLine {
    stroke: #FC4B35;
}

.jchartfx .CustomGridLineLabel {
    fill: #666666;
}

.jchartfx .AxisText {
    fill: #666666;
}

.jchartfx .AxisMajor {
    stroke: #DBDBD9;
}

.jchartfx .AxisMinor {
    stroke: #DBDBD9;
}

.jchartfx .AxisInterlaced {
    fill: #DDDDDB;
}

.jchartfx .AxisLine {
    stroke: #DBDBD9;
}

.jchartfx .AxisSection {
    fill: #FFFFFF;
    stroke: #FFFFFF;
}

.jchartfx .PointLabel {
    fill: #666666;
}

.jchartfx .PointLabelBorder {
    fill: #D0D0D0;
}

.jchartfx .Title {
    fill: #0296B1;
}

.jchartfx .LegendBox {
    fill: transparent;
    stroke: #DBDBD9;
}

.jchartfx .LegendItem {
    fill: #666666;
}

.jchartfx .ScrollBar {
    fill: #F5F5F2;
    stroke: #DBDBD9;
}

.jchartfx .ScrollThumb {
    fill: #DBDBD9;
}

.jchartfx .ScrollArrow {
    fill: #DBDBD9;
}

.jchartfx .LoopMarker {
    stroke: #F00000;
}

.jchartfx .DataGrid_HeaderBack {
    fill: #DDE3E7;
}

.jchartfx .DataGrid_Back {
    fill: #F5F5F2;
}

.jchartfx .DataGrid_GridLine {
    fill: #DEDAD3;
}

.jchartfx .DataGridText {
    fill: #666666;
}

.jchartfx .DataGridTextAlternate {
    fill: #000000;
}

.jchartfx .DataGrid_BackInterlaced {
    fill: #FFFFFF;
}

.jchartfx .DataGrid_RowHeader {
    fill: #666666;
}

.jchartfx .DataGrid_ColumnHeader {
    fill: #6D7D8A;
}

.jchartfx .DataGrid_RowHeaderAlternate {
    fill: #000000;
}

.jchartfx .AnnotationText {
    fill: #404040;
}

.jchartfx .AnnotationTextBorder {
    stroke: #606060;
    fill: #FFF3EE;
}

.jchartfx .AnnotationBalloonText {
    fill: #404040;
}

.jchartfx .AnnotationBalloon {
    stroke: #206020;
    fill: #A0A0E0;
}

.jchartfx .AnnotationCircle {
    stroke: #2060D0;
    fill: #404080;
}

.jchartfx .AnnotationArrow {
    stroke: #404040;
    fill: #800000;
}

.jchartfx .AnnotationRectangle {
    stroke: #806000;
    fill: #D04080;
}

.jchartfx .HeatMap0 {
    fill: #57ACDA;
}

.jchartfx .HeatMap1 {
    fill: #93E24E;
}

.jchartfx .HeatMap2 {
    fill: #A02000;
}

.jchartfx .EqualizerTop0 {
    fill: #F89553;
    stroke: #BA703F;
}

.jchartfx .EqualizerTop1 {
    fill: #F5D34A;
    stroke: #B89F38;
}

.jchartfx .EqualizerOff {
    fill: #DBDBD9;
    fill-opacity: 0.2;
}

.jchartfx .SpecialPoint {
    fill: #D0A000;
    stroke: #806000;
}

.jchartfx .SpecialPointLine {
    stroke: #806000;
}

.jchartfx .MapContext {
    fill: #f5f5ee;
    stroke: #bdbdb6;
}

.jchartfx .MapWater {
    fill: #bfffff;
    stroke: #84d5ff;
}

.jchartfx .MapOcean0 {
    fill: #84d5ff;
    stroke: none;
}

.jchartfx .MapOcean1 {
    fill: #75c7f1;
    stroke: none;
}

.jchartfx .MapOcean2 {
    fill: #66b9e3;
    stroke: none;
}

.jchartfx .MapOcean3 {
    fill: #57abd5;
    stroke: none;
}

.jchartfx .MapOcean {
    fill: #479ec7;
    stroke: none;
}

.jchartfx .MapDefaultAttribute {
    fill: #f5f5ee;
    stroke: #bdbdb6;
}

.jchartfx .MapAttribute0 {
    fill: #93e24e;
    stroke: #5aaa0a;
}

.jchartfx .MapAttribute1 {
    fill: #f26c5b;
    stroke: #b4362d;
}

.jchartfx .MapAttribute2 {
    fill: #f5d34a;
    stroke: #b99d00;
}

.jchartfx .MapAttribute3 {
    fill: #5ea321;
    stroke: #236f00;
}

.jchartfx .MapAttribute4 {
    fill: #ae3223;
    stroke: #720000;
}

.jchartfx .MapAttribute5 {
    fill: #b09423;
    stroke: #776200;
}

.jchartfx .MapAttribute6 {
    fill: #5a6551;
    stroke: #2c3624;
}

.jchartfx .MapAttribute7 {
    fill: #6a5755;
    stroke: #3a2a28;
}

.jchartfx .MapRoad {
    stroke: #fa9e25;
    fill: none;
    stroke-opacity: .3;
}

.jchartfx .MapRoadBack {
    stroke: #FFFFFF;
    stroke-opacity: .1;
    fill: none;
}

.jchartfx .MapRoad0 {
    stroke: #fa9e25;
    fill: none;
    stroke-opacity: 1;
}

.jchartfx .MapRoad0Back {
    stroke: #FFFFFF;
    fill: none;
    stroke-opacity: .4;
}

.jchartfx .MapRoad1 {
    stroke: #E2C195;
    fill: none;
    stroke-opacity: 1;
}

.jchartfx .MapRoad1Back {
    stroke: #FFFFFF;
    fill: none;
    stroke-opacity: .5;
}

.jchartfx .MapTranslationArea {
    fill: #F5F5EE;
    stroke: #DBDBD9;
}

.jchartfx .MapPlot {
    fill: #479ec7;
    fill-opacity: 0;
}

.jchartfx .Indicator {
    fill: #57ACDA;
    stroke: #4281A4;
}

.jchartfx .Cap {
    fill: #DBDBD9;
}

.jchartfx .Bar {
    fill: #FFFFFF;
    stroke: #DBDBD9;
}

.jchartfx .TickMajor {
    fill: #DBDBD9;
    stroke: #DBDBD9;
}

.jchartfx .TickMedium {
    fill: #DBDBD9;
    stroke: #DBDBD9;
}

.jchartfx .GaugeText {
    fill: #666666;
}

.jchartfx .GaugeTitle {
    fill: #0296B1;
}

.jchartfx .GaugeTitleLarge {
    fill: #0296B1;
}

.jchartfx .GaugeSection0 {
    fill: #F26C5B;
    stroke: #B65145;
}

.jchartfx .GaugeSection1 {
    fill: #F5D34A;
    stroke: #B89F38;
}

.jchartfx .GaugeSection2 {
    fill: #93E24E;
    stroke: #6FAA3B;
}

.jchartfx .GreaterThan {
    fill: #93E24E;
    stroke: #93E24E;
}

.jchartfx .LessThan {
    fill: #F26C5B;
    stroke: #F26C5B;
}

.jchartfx .EqualsTo {
    fill: #F5D34A;
    stroke: #F5D34A;
}

.jchartfx .Separator {
    stroke: #DBDBD9;
}

.jchartfx .TitleBack {
    fill: transparent;
}

.jchartfx .DashboardTitle {
    fill: #0296B1;
}

.jchartfx .DashboardCaption {
    fill: #57ACDA;
    stroke: #FFFFFF;
}

.jchartfx .Glow {
    fill: #444444;
}

.jchartfx .MapShadow {
    fill: #444444;
    fill-opacity: 0.3;
}

.jchartfx .BorderEffect1 {
    fill: #AAAAAA;
    fill-opacity: 0.8;
}

.jchartfx .BorderEffect2 {
    fill: #FFFFFF;
    fill-opacity: 1;
}

.jchartfx_container table {
    background-color: #F5F5F2;
    border-color:#DEDAD3;
}

.jchartfx_container table thead tr th {
    background-color: #DDE3E7;
    border-color: #DEDAD3;
    border-bottom-color: #DBDBD9;
    color: #6D7D8A;
}

.jchartfx_container table tbody tr td {
    color: #666666;
    border-color: #DEDAD3;
}

.jchartfx_container table tbody>tr:nth-child(odd)>td {
    background-color: #F5F5F2;
}

.jchartfx_container table tbody>tr:nth-child(even)>td {
    background-color: #FFFFFF;
}

.jchartfx_container h1, .jchartfx_container h2, .jchartfx_container h3 {
    color: #0296b1;
}

.jchartfx_container h4, .jchartfx_container h5, .jchartfx_container h6 {
    color: #666666;
}

.jchartfx_container .labelIndicator {
    color: #666666;
}

.jchartfx_container .label {
    color: #666666;
}

.jchartfx_container .smallLabel {
    color: #666666;
}

.jchartfx_container table {
    box-shadow: 0px 0px 5px 3px rgba(68, 68,  68, .30);
}

.jchartfx .Filler {
    fill: #57ACDA;
    stroke: #4281A4;
}

.jchartfx .GaugeMarker {
    fill: #57ACDA;
    stroke: #4281A4;
}

.jchartfx .Needle {
    fill: #57ACDA;
    stroke: #4281A4;
}

.jchartfx .BorderMedium {
    fill: #F5F5EE;
    stroke: #DBDBD9;
}

.jchartfx .BorderThick {
    fill: #F5F5EE;
    stroke: #DBDBD9;
}

.jchartfx .Border0 {
    stroke: #91FFFF;
    fill: #91FFFF;
}

.jchartfx .Border1 {
    stroke: #F5FF82;
    fill: #F5FF82;
}

.jchartfx .Border2 {
    stroke: #FFB497;
    fill: #FFB497;
}

.jchartfx .Border3 {
    stroke: #FFFF7B;
    fill: #FFFF7B;
}

.jchartfx .Border4 {
    stroke: #FFF88A;
    fill: #FFF88A;
}

.jchartfx .Border5 {
    stroke: #A8FFBF;
    fill: #A8FFBF;
}

.jchartfx .Border6 {
    stroke: #96FFFF;
    fill: #96FFFF;
}

.jchartfx .Border7 {
    stroke: #FFFDDC;
    fill: #FFFDDC;
}

.jchartfx .InsideLabel0 {
    fill: #00204E;
}

.jchartfx .InsideLabel1 {
    fill: #075600;
}

.jchartfx .InsideLabel2 {
    fill: #660000;
}

.jchartfx .InsideLabel3 {
    fill: #694700;
}

.jchartfx .InsideLabel4 {
    fill: #6C0900;
}

.jchartfx .InsideLabel5 {
    fill: #003B00;
}

.jchartfx .InsideLabel6 {
    fill: #00323B;
}

.jchartfx .InsideLabel7 {
    fill: #420C00;
}

.jchartfx .InsideLabel8 {
    fill: #C5CDDB;
}

.jchartfx .InsideLabel9 {
    fill: #5D5E00;
}

.jchartfx .InsideLabel10 {
    fill: #540000;
}

.jchartfx .InsideLabel11 {
    fill: #00583C;
}

.jchartfx .InsideLabel12 {
    fill: #601A00;
}

.jchartfx .InsideLabel13 {
    fill: #0D4414;
}

.jchartfx .InsideLabel14 {
    fill: #420332;
}

.jchartfx .InsideLabel15 {
    fill: #013754;
}

.jchartfx .EmptyMarker {
    stroke: #B2B2B2;
    fill: #CDCDCD;
}

.jchartfx .Repeater {
    fill: #57ACDA;
    stroke: #4281A4;
}

.jchartfx .RepeaterOff {
    fill: #00204E;
    stroke: transparent;
}

[JuanC]

Using setBackColor or fill-opacity in .Border was a direct answer to your question about transparent background.

 

It has nothing to do with the tooltip position in relation to other page elements.

 

JuanC