How to prominent text in the image of Chart.js

Question

User-454825017 posted

Chart.js image looks nice in my web site. there is a button and when user click that button then chart.js image is downloaded in user pc.

when i download chartjs image programmatically then text in image not very prominent but text is looks good in chart. please guide me what to add in code as a result text should be prominent in chart image.

when i am opening chart image file by ms-paint then text inside image looks prominent but when open the same file with windows 10 default image view then text inside image does not looks prominent. please tell me how to fix this problem?

code as follows

    var ctx = document.getElementById("myChart").getContext('2d');
    ctx.height = 900;
    var myChart = new Chart(ctx, {
        type: "bar",
        height: "260px",
        width: "578",
        autoSkip: false,
        responsive: true,
        animation: true,
        showDatapoints: true,
        legend: { position: 'bottom' },


        data: {
            // put label data
            labels: JSON.parse(JSON.stringify(aDatasets1)),
            datasets: [{
                // put label
                label: [],
                // put data
                data: JSON.parse(JSON.stringify(aDatasets2)),
                lineTension: 0,
                fill: false,
                borderColor: "blue",
                //backgroundColor: '#808080',
                pointBorderColor: "blue",
                pointBackgroundColor: "blue",
                pointRadius: 5,
                pointHoverRadius: 10,
                pointHitRadius: 30,
                pointBorderWidth: 2,
                pointStyle: 'rectRounded',
                lineTension: 0.3,
                // put color                        
                backgroundColor: JSON.parse(JSON.stringify(aLabels))
            }]
        },
        options: {
            legend: {
                display: true,
                labels: {
                    fontColor: 'rgb(255, 99, 132)',
                    fontStyle: "bold",
                }
            },
            title: {
                // display title
                display: true,
                // font to bold
                fontStyle: 'bold',
                // put lineitem
                text: lineitem,
                // set position
                position: "top",
                // set font
                fontFamily: "'Franklin Gothic Book', 'Franklin Gothic', 'Franklin Gothic Medium', 'Calibri', 'Arial', 'DejaVu Sans', 'Liberation Sans', 'Freesans', 'sans-serif'",
                // font color                        
                fontColor: "#000",
                // fond size
                fontSize: 13.5

            },
            legend: {
                // set legend false
                display: false,
            },
            tooltips: {
                callbacks: {
                    // tooltip value
                    label: function (tooltipItem, data) {
                        var value = data.datasets[0].data[tooltipItem.index];
                        value = value.replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                        if (aDatasets5[0] == "$") {
                            value = "$" + value;
                        }
                        if (aDatasets4[0] == "True") {
                            value = value + "%";
                        }
                        return value;
                    }
                }
            },
            scales: {
                xAxes: [{
                    //thik of bar                            
                    //barPercentage: 0.8,
                    maxBarThickness: 20,
                    // set gridline
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        // xaxis font size
                        fontSize: 12,
                        // xaxis font name
                        fontFamily: "'Calibri', 'sans-serif'",
                        // xaxis font color
                        fontColor: "#808080"

                    }
                }]
                ,
                yAxes: [{
                    ticks: {
                        // y axis font size
                        fontSize: 12,
                        // font name
                        fontFamily: "'Calibri', 'sans-serif'",
                        // yaxis font color
                        fontColor: "#808080",
                        // returnvalue from y axis   
                        precision: 0,
                        beginAtZero: true,
                        userCallback: function (value, index, values) {
                            if (aDatasets6[0] == "True") {
                                value = value.toFixed(0).toString().replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                            }
                            if (aDatasets5[0] == "$") {
                                value = "$" + value;
                            }
                            if (aDatasets4[0] == "True") {
                                value = value + "%";
                            }
                            return value;
                        }
                    }

                }]
            },
            // responsive graph
            responsive: true,
        }
    }); 

I followed this url to download the chart https://dev.to/noemelo/how-to-save-chart-as-image-chart-js-2l0i

thanks

Answer 1

User1535942433 posted

Hi TDP,

Accroding to your description and codes,as far as I think,you could render the canvas and put canvas into a div.

Besides,you could resize the fontsize or highlight the font.

Just like this:

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<button onclick="download()">save chart as...</button>
<div id="chart-container">
  <canvas id="ctx"></canvas>
</div>

Javascript:

var isChartRendered = false;

var myChart = new Chart(ctx, {
                type: "bar",
                height: "260px",
                width: "578",
                autoSkip: false,
                responsive: true,
                animation: true,
                showDatapoints: true,
                legend: { position: 'bottom' },
                fontSize: 20,

                data: {
                    // put label data
                    labels: ['7 whole grain flakes'],
                    datasets: [{
                        // put label
                        label: [],
                        // put data
                        data: [165, 459, 86, 284],
                        lineTension: 0,
                        fill: false,
                        borderColor: "blue",
                        //backgroundColor: '#808080',
                        pointBorderColor: "blue",
                        pointBackgroundColor: "blue",
                        pointRadius: 5,
                        pointHoverRadius: 10,
                        pointHitRadius: 30,
                        pointBorderWidth: 2,
                        pointStyle: 'rectRounded',
                        lineTension: 0.3,
                        // put color                        
                        backgroundColor: "red"
                    }]
                },
                options: {
                    legend: {
                        display: true,
                        labels: {
                            fontColor: 'rgb(255, 99, 132)',
                            fontStyle: "bold",

                        }
                    },
                    animation: {
                        onComplete: function () {
                            isChartRendered = true
                        }
                    },
                    title: {
                        // display title
                        display: true,
                        // font to bold
                        fontStyle: 'bold',
                        // put lineitem
                        text: "text",
                        // set position
                        position: "top",
                        // set font
                        fontFamily: "'Franklin Gothic Book', 'Franklin Gothic', 'Franklin Gothic Medium', 'Calibri', 'Arial', 'DejaVu Sans', 'Liberation Sans', 'Freesans', 'sans-serif'",
                        // font color                        
                        fontColor: "#000",
                        // fond size
                        fontSize: 50

                    },
                    legend: {
                        // set legend false
                        display: false,
                    },
                    tooltips: {
                        callback: function (value, index, values) {
                            return '$' + value;
                        }
                        //callbacks: {
                        //    // tooltip value
                        //    label: function (tooltipItem, data) {
                        //        var value = data.datasets[0].data[tooltipItem.index];
                        //        value = value.replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                        //        if (aDatasets5[0] == "$") {
                        //            value = "$" + value;
                        //        }
                        //        if (aDatasets4[0] == "True") {
                        //            value = value + "%";
                        //        }
                        //        return value;
                        //    }
                        //}
                    },
                    scales: {
                        xAxes: [{
                            //thik of bar                            
                            //barPercentage: 0.8,
                            maxBarThickness: 20,
                            // set gridline
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                // xaxis font size
                                fontSize: 50,
                                // xaxis font name
                                fontFamily: "'Calibri', 'sans-serif'",
                                // xaxis font color
                                fontColor: "#808080"

                            }
                        }]
                        ,
                        yAxes: [{
                            ticks: {
                                // y axis font size
                                fontSize: 50,
                                // font name
                                fontFamily: "'Calibri', 'sans-serif'",
                                // yaxis font color
                                fontColor: "#808080",
                                // returnvalue from y axis   
                                precision: 0,
                                beginAtZero: true,
                                //userCallback: function (value, index, values) {
                                //    if (aDatasets6[0] == "True") {
                                //        value = value.toFixed(0).toString().replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
                                //    }
                                //    if (aDatasets5[0] == "$") {
                                //        value = "$" + value;
                                //    }
                                //    if (aDatasets4[0] == "True") {
                                //        value = value + "%";
                                //    }
                                //    return value;
                                //}
                            }

                        }]
                    },
                    // responsive graph
                    responsive: true,
                }
            });

function download() {
  if (!isChartRendered) return; // return if chart not rendered
  html2canvas(document.getElementById('chart-container'), {
    onrendered: function(canvas) {
      var link = document.createElement('a');
      link.href = canvas.toDataURL('image/jpeg');
      link.download = 'myChart.jpeg';
      link.click();
    }
  })
}

Result:

I have used the window 10 default image.

If this isn't your requirment,you could post your current result and your requirment image to us.

Best regards,

Yijing Sun

Answer 2

User-454825017 posted

@Yij i will test and let you know later how does it work your code at my end.

https://jsfiddle.net/t4bvnupj/

thanks for your answer.

Answer 3

User-454825017 posted

I have checked your code it is working fine and when i download the chart it look nice in default editor but my chart image now look like below one....here is the image

it looks horrible.

here is my chart js code

var aDatasets1 = aData[1];
            var type = aDatasets1[0];
            var leng = 1;
            var pos = 'left';
            var axisval = aDatasets1[1];
            var stacked;
            if (aDatasets1[0] == "stack") {
                stacked = true;
                type = "bar";
            }
            else {
                stacked = false;
            }
            if (aDatasets1[1] == "y2") {
                axisName = "y2";
            }
            else {
                axisName = "Y1";
            }
            var label = aDatasets1[2];
            var scall = aDatasets1[3];
            aDatasets1.splice(0, 1);
            aDatasets1.splice(0, 1);
            aDatasets1.splice(0, 1);
            aDatasets1.splice(0, 1);
            // add chart canvas to div
            $('#MixedGraphChartCanv').html('<canvas id="myMixedChart"></canvas>');
            //For Bar Chart
            var ctx = document.getElementById("myMixedChart").getContext('2d');

            ctx.fillStyle = "white";
            ctx.height = 9000;
            ctx.width = 9000;
            var myChart = new Chart(ctx, {
                type: type,
                height: "1000px",
                width: "1000",
                autoSkip: false,
                responsive: true,
                animation: true,
                showDatapoints: true,
                legend: { position: 'bottom' },
                data: {
                    // put label data
                    labels: JSON.parse(JSON.stringify(aLabels)),
                    datasets: [
                    {
                        backgroundColor: "#025e85",
                        lineTension: 0,
                        fill: false,
                        borderColor: '#025e85',
                        pointBorderColor: '#025e85',
                        //pointBackgroundColor: '#025e85',
                        pointBackgroundColor: '#FFFFFF', //Colors[color],
                        pointRadius: 5,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: '#025e85',
                        pointHitRadius: 20,
                        pointBorderWidth: 2,
                        pointStyle: 'circle', //'rectRounded',

                        /* Blocked By Soumya Deep | Dt. 07-03-2020*/
                        //pointRadius: 5,
                        //pointHoverRadius: 10,
                        //pointHitRadius: 30,
                        //pointBorderWidth: 2,
                        //pointStyle: 'rectRounded',

                        type: type,
                        lineTension: 0.3,
                        stacked: stacked,
                        label: label + "(" + scall + " " + axisName + ")",
                        data: JSON.parse(JSON.stringify(aDatasets1))
                    }
                    ]
                },

                options:
                {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            fontColor: '#00008b',
                            fontSize: 18,
                            fontStyle: "bold",
                        }
                    },
                    animation: {
                        duration: 0,
                    },
                    title: {
                        // display title
                        display: true,
                        // font to bold
                        fontStyle: 'bold',
                        // put lineitem
                        //text: "text",
                        // set position
                        position: "top",
                        // set font
                        fontFamily: "'Franklin Gothic Book', 'Franklin Gothic', 'Franklin Gothic Medium', 'Calibri', 'Arial', 'DejaVu Sans', 'Liberation Sans', 'Freesans', 'sans-serif'",
                        // font color
                        fontColor: "#000",
                        // fond size
                        fontSize: 50
                    },
                    legend: {
                        // set legend false
                        display: false,
                    },
                    scales: {
                        xAxes: [{
                            stacked: stacked,
                            maxBarThickness: 70,
                            ticks: {
                                fontSize: 18,
                                fontColor: "black"
                            },
                            gridLines: {
                                display: false
                            }
                        }],
                        yAxes: [{
                            stacked: stacked,
                            display: Y1flag,
                            position: 'left',
                            id: 'y-axis-1',
                            scaleLabel: {
                                display: true,
                                labelString: y1millions + y1blank,
                                fontSize: 18,
                                fontColor: "black"
                            },
                            ticks: {
                                fontSize: 18,
                                fontColor: "black"
                            }
                        },
                        {
                            stacked: stacked,
                            display: Y2lag,
                            position: 'right',
                            id: 'y-axis-2',
                            scaleLabel: {
                                display: true,
                                labelString: y2millions + y2blank,
                                fontSize: 18,
                                fontColor: "black"
                            },
                            ticks: {
                                fontSize: 18,
                                fontColor: "black"
                            },
                            pointLabels: {
                                fontStyle: "bold"
                            }
                        }

                        ]

                    },
                    tooltips: {
                        intersect: false,
                        mode: 'index',
                        callbacks: {
                            label: function (tooltipItem, myData) {
                                var label = myData.datasets[tooltipItem.datasetIndex].label || '';
                                if (label) {
                                    label += ': ';
                                }
                                label += parseFloat(tooltipItem.value).toFixed(2);
                                return label;
                            }
                        }
                    }
                }

            });

can you please tell me what is the major difference in your chart code and my chart js code for which my chat image look nice in browser but when i download it and open it by default editor then chart js background looks black.

i am not being able to capture this issue. How chart image background looks fine in browser but when i save that change image and open by default editor then background looks black.

please help me to capture this issue. thanks

Answer 4

User-454825017 posted

@Yij you said you could resize the fontsize or highlight the font.

how to highlight the font instead of resizing the font?

please show me a code to  highlight the font in chart.js. thanks

Answer 5

User-454825017 posted

This solution worked. url is https://stackoverflow.com/questions/43664722/how-to-save-chart-js-charts-as-image-without-black-background-using-blobs-and-fi?noredirect=1&lq=1

var backgroundColor = 'white';
Chart.plugins.register({
    beforeDraw: function(c) {
        var ctx = c.chart.ctx;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

------------------------------------------------------------------------

var backgroundColor = 'white';
Chart.plugins.register({
    beforeDraw: function(c) {
        var ctx = c.chart.ctx;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

// chart
var canvas = $('#NoBidsChart').get(0);
var myChart = new Chart(canvas, {
    type: 'line',
    data: {
        labels: [1, 2, 3, 4, 5],
        datasets: [{
            label: 'Line Chart',
            data: [1, 2, 3, 4, 5],
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgba(255, 0, 0, 0.5)',
            pointBackgroundColor: 'black'
        }]
    }
});

// save as image
$('#save').click(function() {
    canvas.toBlob(function(blob) {
        saveAs(blob, "pretty image.png");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button id="save">Save</button>
<canvas id="NoBidsChart"></canvas>