Apurva

Rounded corners in a chart

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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(FusionChartsChartsFusionTheme); //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;

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now