carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript

Carbon Charts

A reusable framework-agnostic D3 charting library.

Packages

• Vanilla JavaScript
• React
• Angular
• Svelte
• Vue

Demos

Visit the demo website

Design specifications

Carbon data visualization design specifications can be found here.

CHANGELOG

Read the release change logs here

Component status

✅ Stable ⏳ In progress

Component	Vanilla	Angular	React	Vue	Svelte
Simple Bar	✅	✅	✅	✅	✅
Grouped Bar	✅	✅	✅	✅	✅
Stacked Bar	✅	✅	✅	✅	✅
Floating Bar	✅	✅	✅	✅	✅
Donut	✅	✅	✅	✅	✅
Line	✅	✅	✅	✅	✅
Curved Line	✅	✅	✅	✅	✅
Pie	✅	✅	✅	✅	✅
Step	✅	✅	✅	✅	✅
Scatter	✅	✅	✅	✅	✅
Radar	✅	✅	✅	✅	✅
Area	✅	✅	✅	✅	✅
Gauge	✅	✅	✅	✅	✅
Meter	✅	✅	✅	✅	✅
Sparkline	✅	✅	✅	✅	✅
Treemap	✅	✅	✅	✅	✅
Combo	✅	✅	✅	✅	✅
Wordcloud	✅	✅	✅	✅	✅
Bullet	✅	✅	✅	✅	✅
Circle Pack	✅	✅	✅	✅	✅
Network diagrams	—	✅	✅	—	—
Proportional meter	✅	✅	✅	✅	✅
Histogram	✅	✅	✅	✅	✅
Tree	✅	✅	✅	✅	✅
Alluvial	✅	✅	✅	✅	✅
Heatmap	✅	✅	✅	✅	✅
Choropleth	✅	✅	✅	✅	✅

Bugs and feature requests

Have a bug or a feature request? First read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, open a new issue.

Contributing

See our contributing guidelines. Included are instructions for opening issues, coding guidelines, and submitting pull requests.

Versioning

We use the semantic-release library to automatically version our releases within the guidelines of Semantic Versioning Semantic Versioning guidelines.

See our release change logs for the changelog of each version of Charts.

Core team

Eliad Moosavi 💻 📖 💡 🚇 🔬	Jean A Servaas 🎨 📖 💡	Mike Abbink 🎨 📖 📆 🔬	Akshat Patel 💻 📖 💡
Dean Williams 📆	Nina Li 📆	DianaStanciulescu 🎨 📖 💡 🔬	DanaPaslaru 🎨 📖 💡 🔬

Previous core members

natashadecoste 💻 📖 💡	Zvonimir Fras 💻 📖 👀	Callum Smith 💻 📖 👀	Diana Tran 🎨 📖 💡	nicoleroppel 🎨 📖 💡
Shixie 🎨 📖 💡	cameroncalder 🎨 📖 💡	Fei Z 💻 📖 💡 👀	Tyler 🎨 📖 💡	Donisius Wigie 💻 📖 💡

Contributors ✨

Nate Stuyvesant 💻 📖 💡	Eric Yang 💻 📖 💡 👀	Jennifer Chao 💻 📖 💡 👀	Eric Liu 💻 📖 💡 👀	j1mie 💻 📖 💡 👀
shaziajk 💻 📖 💡	MichC 🎨 📖	Pablo Lopez Domowicz 🎨 📖	Jaime Stockton 🎨 📖	Thomas Mullen 💻
Scott Dickerson 💻 📖 💡	Simon Moore 💻 📖 💡 👀	Mariia 💻 📖 💡 👀	rmathur16 🔬	TJ Egan 💻
John Peng 💻

Code of Conduct

Read our code of conduct here

carbon-charts's Issues

onClick events for bars & slices

I am submitting a...

Feature request

charts version:

v1.0.0

Expected behavior

Charts should be emitting events onClick, with the datapoint that's relavant

Support negative values

Combo Chart

Text in center of donut chart should update to relfect total

Currently the center of the donut chart displays a random value specified in the configs. After updating, another random value is generated. We should display the something more meaningful, such as the sum of the slices, and can update this value when a slice is selected/deselected from the legend.

Update d3 to latest version

Currently updating d3 to 5.7.1 seems to not introduce any breaking changes, and the components are functioning as expected.

Should keep in mind upgrading in a major version bump.

Storybook demos

Upgrade to webpack v4.x.x

Curved line chart overflows onto axis on data change

I am submitting a...

• Source code defect

charts version:

[email protected]

Issue description

Curved lines can overflow the chart and cover axis.

Steps to produce the issue

1. Create a line chart with curve: 'curveNatural'.
2. Provide a steep data set. [0, 100, 0]
3. Change data set to [0, 100, 0, 100]

Current behavior

Line overflows beneath x-axis and covers labels.

Expected behavior

Line disappears below x-axis, or chart resizes to fit curve.

Screenshot or recording

Use carbon loading spinner rather than the loading bee SVG

http://carbondesignsystem.com/components/loading/code

Threshold boxes creeping outside of chart container

Line thresholds

Currently we're working on region thresholds with background colors:

Are we looking to implement a lined version as well?

onClick events for x-axis elements

Pie and Donut chart not behaving as expected

I am submitting a...

• Feature request
• Design defect
• Source code defect
• Demo/documentation defect
• Other

charts version:

Issue description

Not sure if this is a bug, or an error in my demo code ... but when I use either the Pie or Donut chart:

1. the background colours I've specified are not the colours displayed in the legend.

2. When I deselect a few datasets in the legend, and then click the "Random data" button, the chart and the legend are no longer in synch.

Steps to produce the issue

See https://codesandbox.io/s/m94mkq4n5y ... and click on "Pie Chart" or "Donut Chart"

Current behavior

Expected behavior

Screenshot or recording

Time/Date scales for X-axis

I am submitting a...

• Feature request
  To allow time and date scales on X axis

charts version:

0.7.4

Screenshot or recording

Angular Wrappers

OnClick event for pie chart segments

I am submitting an enhancement request for the Pie / Donut charts.

• onSegmentClick event for pie segments.

charts version:

Any

Issue description

I have a chart that is populated with just the amount of inventory being used in a given segment. I would like to be able to link the number to the associated orders that make up the number. Right now, there is no onClick event for the pie chart for me to be able to raise the event. I had implemented a work around in a previous release, but would like something provided with the module if possible.

Current behavior

There is no segment click event to do anything from the chart.

Expected behavior

Screenshot or recording, would like something like this to be made available

RTL Support

Bundle React wrappers using Rollup

Extract CSS file for demos rather than including in JS bundle

Demo site loads without styling for a few seconds. Should load styles instantly

Pie & Donut - UI Modes

1. Do we need to be able to hide percentages on a pie/donut
2. Do we need to be able to move percentages into legend
3. Do we need to make legend non-collapsible (also would this only apply to all charts)?

Line chart values do not perfectly align with x-axis in smaller dimensions

Back to back transitions can result in unfinished transitions

Not too critical as you really need to quickly press things to reproduce the bug, and also considering that animations can be disabled in chart configs.

Deploy PR previews + Declare new version before merging

1. It would ideal if demos for every PR commit are deployed to the cloud, to give the reviewers an easier option to testing demo functionality.

2. It would be good practice to know the new version that will be applied by semver before merging a PR

Produce umd & ES files in webpack to allow tree-shaking

React wrappers

Add more unit tests

We essentially should be testing at the very least:

• Data processing & Render
• Tooltips
• Legend filters
• Data updates

Charts collapse onto themselves when element is resized

I am submitting a...

• Feature request
• Design defect
• Source code defect
• Demo/documentation defect
• Other

charts version: Demo version

Issue description

Charts fold in on themselves as they don't have any minimum height requirements when resizing in a resizable element

Steps to produce the issue

Go to the demos page and shrink the size of any chart container element vertically using the bottom right hand corner

Current behavior

Charts collapse in on themselves

Expected behavior

Chart has a minimum height to avoid the above

Screenshot or recording

React links missing in demo site

long x coordinate labels cover x-axis label on data change

I am submitting a...

• Source code defect

charts version:

[email protected]

Issue description

When changing data from data with short x-labels to to data with long x-labels, the x-axis label does not move downwards to accompany them.

Steps to produce the issue

Current behavior

1. Create an axis chart.
2. Provide a data set with labels ['0', '1', '2']
3. Change data to one with labels ['20000000000000','20000000000000','10000000000000',]

Expected behavior

x-axis label moves downwards, out of the way of the x-labels.

Screenshot or recording

export default charting colors in the bundle

The above should be exported in the bundle^^

Move after_success.sh logic into Travis' `deploy` block

charts version:

v1.0.0

Current behavior

Currently after_success.sh is called, then the deploy logic to Github Pages runs

Carbon Charts for React - Stable Release for Mobile Foundation Service Dashboard

We are building our next version of the Dashboard for our service called Mobile Foundation Service which is hosted on Bluemix. We are basing this new version on Carbon and React and have been using carbon-components-react

A critical aspect of our dashboard is Mobile Analytics which provides insights into mobile app usage via various charts. Looking up the carbon-charts project it seems like the React wrapper is not complete yet. Our requirement is line, bar and pie charts. Is there a timeline by which we can expect a release of the React wrapper ?

legendClickable doesn't fully turn off clickability

When legendClickable is set to false, due to adding no unique CSS class to the chart, legend items still light up on hover, although they do not function within the JS side of things.

Also, once the legend collapses and you open the legend tooltip, you are still able to use it to filter data.

Use ElementRef as the chart holder

charts version:

v1.0.0

Current behavior

Using a div inside ElementRef as the chart holder element

Optimize resizeChart()

Suspecting that this is an issue with React & Angular and virtually any frameworks that offer dynamic rendering, where resizeChart will be called during the full render of all the children of a component.

Will inspect this and confirm.

Update dependencies - security alerts

We keep getting security warnings/emails. Need to update dependencies.

Tooltips for Stacked Bar & Line show onClick

Tooltips should always be showing on hover no click

Reduce bundle size

Currently we're not tree-shaking d3 modules, and enabling that would reduce the bundle size significantly.

Update all demos to use the same data

They should all use the same demo-data files and functions for instance changeDemoData

Add ability to disable animations

I am submitting a...

• Feature request

charts version:

v1.0.0

Zoom and scroll functionality

Will post detailed specs here soon, but a good example can be found here:
https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/data-visualization/interaction/
^^Go the navigation section, and click on frame

Implement support for horizontally-shifted data updates

I am submitting a...

• Feature request

Issue description

When we update data, the point elements are animated vertically from their old data value to their new one. When the updated data is a horizontal translation of the previous (such as a sliding window of realtime data), this causes large and confusing changes in the graph during the animation.

We should add the option to specify the data is a translation and match point elements to their translated values.

For example, we have the data:

{
   labels: [0, 1, 2, 3, 4, 5],
   data: [200, 100, 800, 900, 100, 5]
}

We can update the data, specifying that it is a translation of the previous data.

chart.setData([100, 800, 900, 100, 99], { translation: -1 })

This will probably be difficult to implement given the current codebase, but it's necessary if we want to support real-time data.

Remove addDataPointEventListener() from base-axis-chart.ts

This function runs different logic for bar & line charts, therefore should be removed.

https://github.com/IBM/carbon-charts/blob/936e600a98129aab55494fa6e253df480057dc3a/packages/core/src/base-axis-chart.ts#L598-L648

Pie & Donut Label Colors can be wrong

In Pie & Donut if some of your values in the new data provided are larger than before, they get re-ordered since Pie & Donut always show the larger slices first (which is expected).

Now a bug in that functionality shows up where when the order is changed, labels take on different colors than before. If a label is re-used within the lifetime of a chart, it should always show the same color it was initially assigned.

"only one instance of babel-polyfill is allowed" Error

Screen reader accessibility

Charts should be functional when being viewed by screen readers.

JAWS would be a good tool to test with, or the Mac VoiceOver tool:
https://www.freedomscientific.com/Products/Blindness/JAWS

Here's a good read about SVG accessibility:
https://css-tricks.com/accessible-svgs/

ARIA Screen Reader Implementors Guide:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide

ARIA Label:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

ARIA Live Regions
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

ARIA Region:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role

ARIA Labelled By:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

Tabindex:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Support d3 curves' beta, alpha & tensions

Currently we support all of the D3 curves, except for the beta, alpha & tension parameters for 3 of the curves.

Animated initial render in frameworks (e.g. React, angular etc.)

Suspect this is an issue with requestAnimationFrame, which should be replaced with a more efficient method such as ResizeObserver

Use correct default backgroundColors in configurations.ts

Support various d3 easings

Ideally we'd want to expand the animations configs in chart options:

{
   enabled: true,
   ease: "easeExpOut"
}