Jump to content
JChartFX Community
  • 0

transparent background


Go to solution Solved by JuanC,

Question

4 answers to this question

Recommended Posts

  • 0
  • Solution

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
Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites
  • 0

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

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...