Rounded corners in a chart

[Apurva]

Hi,
 

I want rounded corners for my bar chart and added borderRadius: '20' in the code. It works fine and I got rounded corner for the border but I can still see pointed corners in the background of the chart. Do I need to set the rounded corner for the background aswell? If so, what needs to be done? Please guide.

Thanks

Apurva

[Akash Biswas]

Hi Apurva,

 

Please share your chart dataSource in a sample to show us the chart visual that you have achieved, and to elaborate your requirement.

 

Thanks,

Akash.

[Apurva]

I'm unable to load the screenshot but here is the code. If you run it, you will understand the requirement.

import React from "react";

import FusionCharts from "fusioncharts";

import ReactFC from "react-fusioncharts";

import Charts from "fusioncharts/fusioncharts.charts";

 

import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

import './styles/bdl/css/bdl.css';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme); //Column2D

 

const chartConfigs = {

  type: "scrollbar2d", //scrollcolumn2d //scrollbar2d

  width: "700",

  height: "400",

  dataFormat: "json",

  dataSource: {

    chart: {

      theme: "fusion",

      caption: "Top 25 NPM Packages for Node.js Developers",

      subCaption: "March 2019",

      plottooltext: "$datavalue Downloads",

      YAxisname: "Number of Downloads",

      XAxisname: "Packages",

      showvalues: "1",

      placeValuesInside: "0",

      canvasRightPadding: "40",

      showBorder: "1",

      borderRadius: "20",

      borderColor: "#666666",

      bgColor: "DDDDDD"

       },

    categories: [{

      category: [{

          label: "Commander.js"

        },

        {

          label: "Async.js"

        },

        {

          label: "Request – Simplified HTTP Client"

        },

        {

          label: "Express"

        },

        {

          label: "WebPack"

        },

        {

          label: "Hapi"

        }

      ]

    }],

    dataset: [{

      data: [{

          value: "97294205"

        },

        {

          value: "95482197"

        },

        {

          value: "60224172"

        },

        {

          value: "33018247"

        },

        {

          value: "31615028"

        },

        {

          value: "1042206"

        }

      ]

    }]

  }

};

 

class FusionChart extends React.Component {

  render() {

    console.log(chartConfigs);

 

    return ( <

      ReactFC {

        ...chartConfigs

      }

      />

 

    );

  }

}

 

export default FusionChart;

[Akash Biswas]

Hi,

 

The attribute that you are using "borderRadius" is not an officially supported attribute. Please check the supported attribute list for scrollbar2d chart type in the below link :

https://www.fusioncharts.com/dev/chart-attributes/scrollbar2d

 

Thanks,

Akash.