Chart Background "" or "transparent" not working

4 posts, 0 answers
  1. Tim
    Tim avatar
    2 posts
    Member since:
    Apr 2016

    Posted 30 Apr Link to this post

    "transparent" or "" or "Transparent" do not work, result is solid white background This will only take a hex color string, will not accept an rgba string. I need a transparent background for all my charts.

     

     function createChart() {
                $("#detail-chart").kendoChart({
                   theme: "Material",
                          chartArea: {background:"transparent", height:300},
                          title: {
                              position: "top",
                              text: "Sales Percentage \n Per Market",
                              color: "#868686"
                          },
                          legend: {
                              visible: true,
                              position: "bottom",
                              labels: {
                                color: "#868686",
                                padding: {right:10,bottom:2},
                                margin: {right:14}
                              }
                          },
                    seriesDefaults: {
                        type: "bar",
                        stack: true
                    },
                    series: [{
                        name: "Sales Percentage",
                        data: [40, 32, 61],
                        color: "#425968"
                    }, {
                        name: "Total Local Market",
                        data: [100, 100, 100],
                        color: "#c3c3c3"
                    }],
                    valueAxis: {
                        max: 100,
                        majorUnit: 50,
                        line: {visible: false},
                        minorGridLines: {visible: false},
                        labels: {
                          format:"{0:n0}%",
                          color: "#525252"
                        }
                    },
                    categoryAxis: {
                        categories: ["African American", "Hispanic", "Asian American"],
                        majorGridLines: {visible: false},
                        labels: {
                          color: "#525252"
                        }
                    },
                    tooltip: {
                        visible: true,
                      template: "#= category # (#= series.name #): #= value #%",
                        font: "20px"
                    }
                });
            }

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 03 May Link to this post

    Hi Tim,

    The "transparent" background is working as expected on my side. Could you please take a look at this dojo and let me know what I am missing?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Tim
    Tim avatar
    2 posts
    Member since:
    Apr 2016

    Posted 03 May in reply to Iliana Nikolova Link to this post

    Through trial and error I discovered that the chart requires this CSS style attached, otherwise the background is white:

        .k-content {
          background:none;
        }

    I do not see this css style applied on the dojo version. Wondering where the difference is.

     

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 04 May Link to this post

    Hi Tim,

    The .k-content class is not related to Kendo UI Chart and I am not quite sure what causes the problem in your application. Please try removing all custom CSS and let me know if the same problem occurs.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready