How to create a pie chart using canvas?

Question

JavaScript

Good evening! From this code, you should get a pie chart and numbers. Instead, an error occurs: that the name variable is not defined and other errors. Please help me in this. This is my first time with canvas. Can't solve it.
https://codepen.io/Alexei_87/pen/xxxqVyM

Answer 1

Do you have all the necessary libraries connected to work with the Chart library? Perhaps jQuery is needed there. Post the full error log so you can see what's going on.

Answer 2

webpack.config

const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const fs = require('fs')

function generateHtmlPlugins(templateDir) {
  const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
  return templateFiles.map(item => {
    const parts = item.split('.');
    const name = parts[0];
    const extension = parts[1];
    return new HtmlWebpackPlugin({
      filename: `${name}.html`,
      template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
      inject: false,
    })
  })
}

const htmlPlugins = generateHtmlPlugins('./src/html/views')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin({}),
      new UglifyJsPlugin({})
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 4200
  },
 
  
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',   
      template: './src/html/views/index.html',

    }),
    new HtmlWebpackPlugin({
      filename: 'header.html',
      template: './src/html/includes/header.html',
    }),
    
    new HtmlWebpackPlugin({
      filename: 'aside.html',
      template: './src/html/includes/aside.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/style.css'
    })
  ].concat(htmlPlugins),
  resolve: {
    extensions: ['.js', '.ts']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
       {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.html$/,
        include: path.resolve(__dirname, 'src/html/includes'),
        use: ['raw-loader']
      },
      //  {
      //       test: /\.html$/, // tells webpack to use this loader for all ".html" files
      //       loader: 'html-loader'
      //   },
   //   {
        
        //test: /\.(png|jpe?g|gif)$/i,
      //  use: [
        //  {
         // loader:'file-loader',
         // options:{
         //   name:'[name].[ext]',
         //   outputPath:'./',
          //  useRelativePath:true
         //   }
        //  }
       // ]
     // },
      
     
      { 
        test: /\.(js|ts)$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      }
    ]
  }
}

package.json
<code lang="javascript">
{
  "name": "test",
  "version": "1.0.0",
  "description": "only for test from webformyself",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production --open"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Alexei",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "raw-loader": "^3.1.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "bootstrap": "^4.3.1",
    "canvas": "^2.6.0",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0"
  }
}

</code>