Font style not applied when chart is exported

2 posts, 0 answers
  1. Hema
    Hema avatar
    20 posts
    Member since:
    Jul 2015

    Posted 21 Dec 2015 Link to this post

    My chart is has the font Brush Script MT. When I use the exportPDF option , however it changes to someother font . However, exportImg works fine. I also tried to set the font family using css , but it doesn't work .

     code snippet . I have attached the sample html .

     function createChart() {
                $("#fontchart").kendoChart({
                    title: {
                        text: "Hybrid car mileage report",
                        font: "bold 16px 'Brush Script MT'"
                    },
                    legend: {
                        position: "top",
                        labels: {
                            font: "12px 'Brush Script MT'"
                        }
                    },
                    series: [{
                        type: "column",
                        data: [20, 40, 45, 30, 50],
                        stack: true,
                        name: "on battery",
                        color: "#cc6e38"
                    }, {
                        type: "column",
                        data: [20, 30, 35, 35, 40],
                        stack: true,
                        name: "on gas",
                        color: "#ef955f"
                    }, {
                        type: "line",
                        data: [30, 38, 40, 32, 42],
                        name: "mpg",
                        color: "#ec5e0a",
                        axis: "mpg"
                    }, {
                        type: "line",
                        data: [7.8, 6.2, 5.9, 7.4, 5.6],
                        name: "l/100 km",
                        color: "#4e4141",
                        axis: "l100km"
                    }],
                    valueAxes: [{
                        title: { text: "miles",
                               font: "12px 'Brush Script MT'"},
                        min: 0,
                        max: 100
                    }, {
                        name: "km",
                        title: { text: "km",
                               font: "12px 'Brush Script MT'"},
                        min: 0,
                        max: 161,
                        majorUnit: 32
                    }, {
                        name: "mpg",
                        title: { text: "miles per gallon",
                               font: "12px 'Brush Script MT'"},                       
                        color: "#ec5e0a"
                    }, {
                        name: "l100km",
                        title: { text: "liters per 100km",
                               font: "12px 'Brush Script MT'"},
                      
                        color: "#4e4141"
                    }],
                    categoryAxis: {
                        categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
                          labels : {
                                font: "12px 'Brush Script MT'"
                          },

                        // Align the first two value axes to the left
                        // and the last two to the right.
                        //
                        // Right alignment is done by specifying a
                        // crossing value greater than or equal to
                        // the number of categories.
                        axisCrossingValues: [0, 0, 10, 10]
                    }
                });
            }

    $(".export-pdf").click(function() {
                var chart = $("#fontchart").getKendoChart();
                chart.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },font: "12px 'Brush Script MT'" }).done(function(data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.pdf",
                          font: "12px 'Brush Script MT'",
                        proxyURL: "//demos.telerik.com/kendo-ui/service/export"
                    });
                });
            });

  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 23 Dec 2015 Link to this post

    Hello,

    I would suggest you to take a look at the Custom Fonts and PDF help article, which explains how fonts should be declared and notes some requirements that must be met for proper functioning. It would help you resolve the issue faced.

    Regards,
    Dimitar
    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
Back to Top