TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    Radar Chart

    Status Version Size Chart License



    Radar Chart generator for Node.js (server-side) based on D3.js v5. This library contain supports to generate SVG, HTML and Image (png & jpeg) file.


    Using NPM or YARN to install the package

    npm install radarchart-node
    yarn add radarchart-node


    import { RadarChart } from 'radarchart-node';
    const radarChart =  RadarChart(data, RadarOptions);

    Check out the test for usage.

    Output the visualization result to a image

    npm run start

    Output Preview (png)



    1. RadarChart(data, [RadarOptions?], [SVGRadarOptions?])

    Data* (required)

    • Type: Array<Object>

    • Example data structure

    const  data = [{
        name:  'Allocated budget',
        axes: [
            {axis:  'Sales', value:  4},
            {axis:  'Marketing', value:  5},
            {axis:  'Development', value:  2},
            {axis:  'Customer Support', value:  1},
            {axis:  'Information Technology', value:  8},
            {axis:  'Administration', value:  5},
            {axis:  'Administration', value:  2},
            {axis:  'Administration', value:  5}
        color:  '#0828f5'

    Each object data consists of the name, values array, and color.

    RadarOptions (optional)

    • Type: Object
    • Example option structure RadarOptions
    const  cfg = {
        w:  450,             // Width of the circle
        h:  350,             // Height of the circle
        margin: {
            top:  50, right:  80, bottom:  50, left:  80
        },                   // The margins of the SVG (or number for all side margin)
        levels:  10,         // How many levels or inner circles should there be drawn
        maxValue:  10,       // What is the value that the biggest circle will represent
        strokeWidth:  1,     // The width of the stroke around each blob
        roundStrokes: false, // If true the area and stroke will follow a round path (cardinal-closed)
        color:  ['#0828f5'], // Color ranged
        format:  '.0f',      // Format default is .0f (%,...)
        unit:  '',           // Unit value (ex: $...)
        legend: false        // Format: { title: string, translateX: number, translateY: number }

    SVGRadarOptions (Optional)

    • This option has been declared for the virtual DOM.
    • Default Object values for for SVGRadarOptions
    const SVGOptions = {
        selector: ".radar-chart-node", // select class of container to create D3-canvas
        svgStyle: `
            .arc text {font: 10px sans-serif; text-anchor: middle;}
            .arc path {stroke: #fff;}
        container: `<div class="radar-chart-node"></div>`, // DOM contain the visualization result
        radius: 150

    2. Generate SVG - HTML - Image (PNG || JPEG)

    generateRadarChart(radarChartD3, [type?], [RadarGenerateOptions?])

    • The function will convert the radar chart into <SVGElement> or <HTMLElement> and write it as a file by using option write: true
    • FunctiongenerateRadarChart has 2 types: svg and html
    // import module
    import { RadarChart, generateRadarChart } from 'radarchart-node'
    const radarChartD3 = RadarChart(...) // object d3
    const type = 'html' // default is 'svg'
    // object by default
    const RadarGenerateOptions = {
        write:  false, // set true if want to write as a file
        dest:  './test',
        fileName:  'radar-chart'
    // generate chart
    const generated = generateRadarChart(radarChartD3, type, RadarGenerateOptions)
    console.log(generated) // -----> <!html>....<html>

    generateRadarImage(radarChartD3, [type?], [RadarGenerateOptions?])

    • The same as generateRadarChart, this function will generate radar chart as image and write it as png or jpeg image.
    • Example of image generation:
    // import module
    import { generateRadarImage } from 'radarchart-node'
    const type = 'jpeg' // default is 'png'
    // object by default
    const RadarGenerateOptions = {
        dest:  './test',
        fileName:  'radar-chart'
    // execute function to generate image
    generateRadarImage(radarChartD3, type, RadarGenerateOptions)


    1. Please submit your idea to this git branch if you have any suggestion!

    2. Create feature branch: git checkout -b new-feature

    3. Commit changes: git commit -am 'New feature description'

    4. Then push: git push origin new-feature

    5. Submit a pull request after accomplishing your new feature xD


    MIT LICENSE © d3-node


    npm i radarchart-node

    DownloadsWeekly Downloads






    Unpacked Size

    161 kB

    Total Files


    Last publish


    • quannh.netalik