Displaying customized labels for each coordinates in node.js using chart.js.

Ekta Prasad — Fri, 10 Dec 2021 19:30:46 +0000

The above image is the output of the code for this article.If you are desiring the same, you can continue reading this page.

To display customize data labels for each coordinate in node.js using chart.js is a bit different or difficult. I did it by importing another third-party library that was definitely hard to implement initially, I had to read the documentation and went through many StackOverflow answers to find the solutions. So here I am documenting all of it together.

Note: I assume you already have installed and use chart.js and chartjs-node-canvas, if not you can check out this link

Installing packages

First install chartjs-plugin-datalabels

npm i chartjs-plugin-datalabels;

Now require it into your file :

const ChartDataLabels = require('chartjs-plugin-datalabels');

Then you need to write

const chartJsFactory = () => {
    const Chart = require('chart.js');
    require('chartjs-plugin-datalabels');
    delete require.cache[require.resolve('chart.js')];
    delete require.cache[require.resolve('chartjs-plugin-datalabels')];
    return Chart;
    }

Next, you need to customize the callback

const chartCallback = (ChartJS) => {
    ChartJS.plugins.register({
        ChartDataLabels
    });
};

Now for using this, you need to pass it on service like this:

const canvasRenderService = new CanvasRenderService(width, height, chartCallback, undefined,chartJsFactory);

Customizing Plugin

You customize the plugin inside the nested object like this

configuration = {
  options:{
      plugin:{

      }
  }
}

Now you can customize the plugin as the way you want.I have written few customizable elements, you can checkout the documentation for more here

plugins: {
    datalabels: {
        align: function(context) {
            return -45;
          },

        color: function(context) {
            return context.dataset.borderColor;
          },

        font: {
            size: 20,
            weight: 500
          },


        display: 'auto',  //hides overlapping data labels

        formatter: function(value, context) {
            if(value.indexLabel == '100%') {
                return 'Peak'
            }
            return value.indexLabel ;
        },
    }
  }

Final code

Thank you for reading it till here. I hope it helps you.Below is the final code.

const { CanvasRenderService } = require('chartjs-node-canvas');
const ChartDataLabels = require('chartjs-plugin-datalabels');
const fs = require("fs");

const chartJsFactory = () => {
    const Chart = require('chart.js');
    require('chartjs-plugin-datalabels');
    delete require.cache[require.resolve('chart.js')];
    delete require.cache[require.resolve('chartjs-plugin-datalabels')];
    return Chart;
    }

const width = 1600;
const height = 750;
const chartCallback = (ChartJS) => {

    ChartJS.defaults.global.elements.point.pointStyle = "star";
    ChartJS.defaults.global.elements.point.radius = "4",
    ChartJS.defaults.global.elements.point.defaultFontSize = "90px",
    ChartJS.plugins.register({
        ChartDataLabels
    });


};
const canvasRenderService = new CanvasRenderService(width, height, chartCallback, undefined,chartJsFactory);


const createImage = async () => {
    let dataset1=[],dataset2=[],dataset3=[];

        dataset1 = [{x:123,y:45,indexLabel:'25%'},{x:115,y:65,indexLabel:'55%'},{x:128,y:195,indexLabel:'75%'},{x:723,y:145,indexLabel:'100%'}];
        dataset2 = [{x:239,y:27,indexLabel:'25%'},{x:498,y:25,indexLabel:'55%'},{x:318,y:95,indexLabel:'75%'},{x:933,y:195,indexLabel:'100%'}]


    const configuration = {
        type: 'line',
          data: {
              labels: [0,150,300,450,600,750,900,1050],
              datasets: [{
                  label: 'legend1',
                  data: dataset1,
                  fill: false,
                  borderColor: 'blue',
                  borderWidth: 3,
                  showLine: true,
                  xAxisID: 'xAxis1'
              },
              {
                  label: 'legend2',
                  data: dataset2,
                  fill: false,
                  borderColor: 'red',
                  borderWidth: 3,
                  xAxisID: 'xAxis1'
              }
              ],

          },
          options: {
            legend: {
                labels: {
                    filter: function(item, chart) {
                        return !item.text.includes('legend2'); // hides a particular legend
                    },
                    fontSize: 18
                }
            },
                  scales: {
                  xAxes:[
                      {
                    type:'linear'
                      id:'xAxis1',
                        ticks: {
                            beginAtZero: false,
                            max: 1000,
                            stepSize:50,
                            fontSize: 18,

                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'x axis label',
                            fontSize: 20,
                            fontColor:'black'
                          },

                     },
                    ],
                    yAxes: [{
                    display: true,
                    ticks: {
                        max: 300,
                        stepSize: 20,
                        fontSize: 18
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'y axis label',
                        fontSize: 20,
                        fontColor:'black'
                    }
                }],
              },

            plugins: {
                datalabels: {
                    align: function(context) {
                        return -45;
                      },

                    color: function(context) {
                        return context.dataset.borderColor;
                      },

                    font: {
                        size: 20,
                        weight: 500
                      },


                    display: 'auto',  //hides overlapping data labels

                    formatter: function(value, context) {
                        if(value.indexLabel == '100%') {
                            return 'Peak'
                        }
                        return value.indexLabel ;
                    },
                }
              }
          }
          }

    const dataUrl = await canvasRenderService.renderToDataURL(configuration);
    return dataUrl;
};

module.exports = {
createImage
}

Adios Amigo.

How to use Chart.js with Node.js and save it as an image

Ekta Prasad — Sun, 05 Dec 2021 19:06:04 +0000

There is a very simple way to use chart.js on an HTML page, one just has to include the CDN URL in ‘src’ and draw on canvas in the script tag. But this script tag runs when you open the file in the browser, what if you want to run the code on the node.js server. For that, you can continue reading my post.

Installing packages

For making a chart on node.js, first, you will have to install** chart.js** and *chartjs-node-canvas *.

npm i chart.js
npm i chartjs-node-canvas

Now require it into your file :

const {CanvasRenderService} = require('chartjs-node-canvas');

For using the chartjs service, you will have to write:

const canvasRenderService = new CanvasRenderService(width, height, chartCallback);

Here you will be providing width, height, and the callback function.

Converting chart to image

For converting the chart to an image, you use ‘renderToDataURL’. This converts the chart into a base64 image URL. By default, it converts the image to png format. In the configuration, you pass the customized values as per your need.

canvasRenderService.renderToDataURL(configuration);

The configuration is similar to what you use in html or script. You can find the documentation here .

Final Code

const { CanvasRenderService } = require('chartjs-node-canvas');
const width = 1000;   // define width and height of canvas
const height = 1000;
const chartCallback = (ChartJS) => {
 console.log('chart built')
};
const canvasRenderService = new CanvasRenderService(width, height, chartCallback);

var xLabels = ['1','2','3','4','5','6','7','8','9','10','11']

const createImage = async () => {
    const configuration = {
        type: 'line',   // for line chart
          data: {
              labels: [150,300,450,600,750,900,1050,1200,1350,1500],
              datasets: [{
                  label: "sample 1",
                  data: [100,43],
                  fill: false,
                  borderColor: ['rgba(255, 99, 132, 1)'],
                  borderWidth: 1,
                  xAxisID: 'xAxis1' //define top or bottm axis ,modifies on scale
              },
              {
                  label: "sample 2",
                  data: [72,83],
                  fill: false,
                  borderColor: ['rgba(265, 99, 132, 1)'],
                  borderWidth: 1,
                  xAxisID: 'xAxis1'
              },
              {
                  label: "sample3",
                  data: [30,56],
                  fill: false,
                  borderColor: ['rgba(235, 99, 122, 1)'],
                  borderWidth: 1,
                  xAxisID: 'xAxis1'
              }
              ],

          },
          options: {
                  scales: {
                  xAxes:[
                      {
                      id:'xAxis1',
                      position: 'bottom',
                      type:"category",

                      },
                      {
                      id:'xAxis2',
                      position: 'top',
                      type:"category",
                      ticks:{
                          callback: function(value, index, values) {
                              return xLabels[index];  // gives points of top x axis
                          }
                  },
              }],
                  yAxes: [{
                  display: true,
                  ticks: {
                      max: 200,
                      stepSize: 10, //defines y axis step scale
                  }
              }]
          ,
              }
          }
          }

    const dataUrl = await canvasRenderService.renderToDataURL(configuration); // converts chart to image
    return dataUrl;
};

module.exports = {
createImage   //for exporting to another file
}

And this is how you make it work on node.js server. You can use the image to any file now whether ejs or html. Hope it helps.

DEV Community: Ekta Prasad

Displaying customized labels for each coordinates in node.js using chart.js.

Installing packages

Customizing Plugin

Final code

How to use Chart.js with Node.js and save it as an image

Installing packages

Converting chart to image

Final Code