This is a migrated thread and some comments may be shown as answers.

Font style not applied when chart is exported

1 Answer 69 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Hema
Top achievements
Rank 1
Hema asked on 21 Dec 2015, 07:46 PM

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

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 23 Dec 2015, 11:39 AM
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!
 
Tags
Charts
Asked by
Hema
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or