Tips

Doppio's PDF Magic with Chart.js, React, and Tailwind ✨

Enhancing data visualization in PDFs with Doppio and Chart.js !

Today, we will explore Doppio's integration with Chart.js, React, and Tailwind CSS, elevating data visualization to new heights. Say farewell to bland charts as we delve into how Doppio transforms them into visually captivating PDFs !

1/ Setting up a React App with Tailwind 🔨

First, we need to create our React project including Tailwind CSS.

Let’s create the project:

npx create-react-app my_doppio_react_tailwind_chartjs_project
cd my_doppio_react_tailwind_chartjs_project

npm install -D tailwindcss npx tailwindcss init

Then in the tailwind.config.js, add the following code to configure your template paths:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Finally, add the Tailwind directives into the index.css file:

@tailwind base; 
@tailwind components; 
@tailwind utilities;

You can also check the official Tailwind’s documentation here.

2/ Installing Chart.js for React

Secondly we have to install the Chart.js integration for React:

npm i react-chartjs-2 chart.js

3/ Let’s create a Chart.js component !

And now, we’re ready to create our first Chart.js component.
Let’s say we need to display some datas using bars:

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar as BarChartJs } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const Bar = () => {
  
  const options = {
    animation: false,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Bar Chart',
      },
    },
  };
  
  const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  
  const data = {
    labels,
    datasets: [
      {
        label: 'Dataset 1',
        data: labels.map(() => Math.floor(Math.random() * 1000)),
        backgroundColor: 'rgba(255, 99, 132, 1)',
      },
      {
        label: 'Dataset 2',
        data: labels.map(() => Math.floor(Math.random() * 1000)),
        backgroundColor: 'rgba(53, 162, 235, 1)',
      },
    ],
  };
  return (
      <BarChartJs options={options} data={data}  />
  );
}

export default Bar;

To prevent any problem when rendering your graphs and charts on pdf, consider to unset the animations through the option object :

const options = {
    animation: false, // <- Here 
    ...
  };

4/ Use it into your app

Finally, we import our “bar component” into our main component . Then we add some style using Tailwind.css

import Bar from "./Bar";

const App = () => {
  return (
    <div className="h-screen w-screen p-5 flex flex-col items-center bg-slate-300">
      <h1 className="text-5xl text-zinc-700">Doppio X React.js X Chart.js X Tailwind</h1>
      <div className="w-full p-10" >
        <Bar />
      </div>
    </div>
  );
}

export default App;

Et voila, we get now this nice graph displayed on our browser:

Cool isn’t it ? 😎

Yeah but we can make it cooler by creating a perfectly sized PDF file using Doppio ! 🚀

5/ From HTML to PDF 🚀

Let’s post an HTTP request to https://api.doppio.sh/v1/render/pdf/direct for exemple, with that JSON body:

{
	"launch": {
    "defaultViewport": {
	    "width": 1024,
	    "height": 1024
    }
},
  "page": {
    "goto": {
      "url": "https://your-dope-website.com",
      "options": {
        "waitUntil": ["networkidle0"] 
      }
    },
     "pdf": {
        "printBackground": true,
        "format": "A4",
        "landscape": true
    }
  }
}

Make sure to have the waitUntilproperty set to networkidle0 or networkidle2. Otherwise your Chart.js components may not be displayed.

Also, if the chart seems to have size problem on the pdf rendering, play with the values of the viewport’s width and height (as you can see above).