2

First please bear with me. I do not think that this question is appropriate for Stack Overflow. I first tried to ask this question in the official GitHub repository of this project, but they strongly suggest to ask question in Stack Overflow with corresponding tags, so here I am...

The point is that is strange for me that I can not find official documentation and examples of Fluent UI React Charting components in the official website of Fluent UI React, even though the official NPM package is public and is being constantly updated. To be fair, I found this website but It looks outdated. Any help will be much appreciated.

Rohan Büchner
  • 5,333
  • 4
  • 62
  • 106
Narvalex
  • 1,824
  • 2
  • 18
  • 27
  • https://github.com/microsoft/fluentui/tree/master/packages/charting All their charts seem to import like this `import { ComponentName } from '@uifabric/charting/lib/ComponentName';` Then you'd have to look at the props of each chart I guess? (Pretty terrible docs... haha.) But if you MUST use it... thats the way I'd go about it. – Rohan Büchner Jul 17 '20 at 12:35
  • Thanks @RohanBüchner , the truth is after seeing such beautiful charts like this new one (https://github.com/microsoft/fluentui/pull/13982) I cant help but ask if at least there is a list of all available charts in the project. But well... I think I will get my downvotes anyway – Narvalex Jul 17 '20 at 12:47
  • Not my downvote. :P But yeah, the community is quite harsh sometimes. Goodluck with getting more info on this lib though. – Rohan Büchner Jul 17 '20 at 12:49
  • 1
    AH!!! Ok look at the `package.json`. Clone the repo & start the storybook: "start": "just-scripts dev:storybook" – Rohan Büchner Jul 17 '20 at 12:53

2 Answers2

2

Potentially this can help you.

  1. clone the repo
git clone git@github.com:microsoft/fluentui.git
  1. then navigate to the charting folder, and install the deps (they use yarn by the looks of things)
yarn install
  1. then start storybook
yarn start

You'll see this.

Storybook

Storybook will cover the components inside the lib from what I can see, in terms of what they have on offer. That being said they still don't document the props & how to configure the components... but you should be able to sift through the storybook code to see how they got the charts to render inside storybook at least.

Not the best documented library ever... but perhaps that can get you going :)

Rohan Büchner
  • 5,333
  • 4
  • 62
  • 106
  • 1
    This is the best option to date to get acquainted with this lib. Thanks man for your time and research. – Narvalex Jul 17 '20 at 13:29
  • This mixing of `yarn` and `npm` is probably not the best idea... – spender Nov 19 '20 at 19:43
  • @spender Huh? Why comment that even? Their project has a yarn lock file. That’s why you need to use yarn install. And how else would you run the start command as per the package.json. I’m not disagreeing... but your comment seems a little misguided in this instance. – Rohan Büchner Nov 19 '20 at 20:14
  • The equivalent under `yarn` would be `yarn start` – spender Nov 19 '20 at 20:31
  • 1
    @spender fair enough. But that on its own, I believe, won’t cause any issues. Just invoking the start command from the package.json with either yarn or npm, won’t cause issues. I generally don’t use yarn. But as there is a lock for it already I stuck with that. But if you MUST nitpick, I’ll concede that you are right about that. – Rohan Büchner Nov 19 '20 at 20:37
  • Agree, is a bit nitpicky. I've been doing code-reviews today. :) – spender Nov 19 '20 at 20:40
  • Haha. Sorry for the animosity in my first response. Also been a long day. I’ll update the answers for conciseness :P – Rohan Büchner Nov 19 '20 at 20:41
1

The documentation and examples for @fluentui/react-charting library is available at https://aka.ms/fluentcharting. Feel free to post any issues and suggestions here and the team will respond to your queries.

AtishayMsft
  • 26
  • 1