Victory Charts Visualizations Nerdpack

Custom visualizations with the Victory Charts Visualizations nerdpack

This package includes visualizations for you to easily get up and going with the Victory charting library (built and maintained by Formidable).

These visualizations are built by New Relic as charts that you can quickly apply a NRQL query to and add to a dashboard—or use as a template, and expand on the code already provided.


Clone this nerdpack

Requirements

Make sure you have the New Relic One CLI installed (instructions here!)

Getting Started

Clone the nr1-victory-visualizations repository and run the following scripts:

git clone https://github.com/newrelic/nr1-victory-visualizations.git
cd nr1-victory-visualizations
npm install
npm start

Click on any of the links in your terminal to navigate directly to your new Victory custom visualization!

Learn more

Check out out our developer’s guide: Build your first custom visualization

About Victory charts

Victory is a set of modular charting components for React and React Native. Victory makes it easy to get started without sacrificing flexibility. Create one of a kind data visualizations with fully customizable styles and behaviors. Victory uses the same API for web and React Native applications for easy cross-platform charting. Victory is helmed by Formidable’s Lauren Eastridge.

About Formidable

Formidable is a global design and engineering consultancy and open source software organization, specializing in React.js, React Native, GraphQL, Node.js and the extended JavaScript ecosystem. They have locations in Seattle, London, Toronto, Denver, Atlanta, and Phoenix with remote consultants worldwide. For more information, please visit formidable.com.

7 Likes

Hello all,
is there any plan to extend stacked bar charts with “thresholds coloring scheme”?

It would woud be great to have bars painted with usual green/yellow/red (OK/Warning/Critical).

Hi @antonio.giurini! :wave:

We don’t have a plan to build out a stacked bar with those threshold colors, but it’s a great idea! That’s just the kind of customization that’s now in possible for someone like yourself or an engineering colleague to undertake.

We’ve just released a developers’ guide detailing how you can extend the Victory Charts Visualizations: Customize an open-source Nerdpack. I think that guide could be really useful here.

In brief, you’d want to:

  1. Follow the guide steps to make your own copy of the Victory Charts Visualizations nerdpack
  2. Edit the stacked bar chart’s transformData function so that the color key on this line resolves to the threshold color you want

You could even adjust your visualization’s nr1.json file so that the thresholds for those colors can be dynamically set, like we’ve done here in the code for the circular progress bar

Hope that helps and we’d love to see what you come up with! :grinning_face_with_smiling_eyes:

1 Like

Thanks @rtyree !
The link you provided seems very interesting, I will plan an investigation in the next days.

1 Like