Nocturnal Practitioners of Magic


    2.21.0 • Public • Published

    Carbon Graphs

    Build Status npm

    A vanilla JavaScript graphing library built using d3 based on Cerner design standards.

    Installing Carbon

    • Install from npmjs using the command below:
    npm i @cerner/carbon-graphs --save-dev

    Getting Started

    To create a graph with carbon, first let's create a graph configuration object and use it to initialize that canvas:

    const GRAPH_DATA = {
      bindTo: "#root",
      axis: {
        x: {
          show: true,
          label: "x-axis label",
          lowerLimit: 0,
          upperLimit: 100
        y: {
          show: true,
          label: "y-axis label",
          lowerLimit: 0,
          upperLimit: 10,
    var canvas = Carbon.api.graph(GRAPH_DATA);

    Let's create a sample dataset to plot:

    const CONTENT_DATA1 = {
      key: "uid_1",
      label: {
        display: "Dataset A"
      values: [
          x: 10,
          y: 9
          x: 45,
          y: 3
          x: 60,
          y: 7
          x: 77,
          y: 8
          x: 94,
          y: 2

    The data can now by plotted by as a line graph by using the following:


    This results in the following graph:


    Graph types

    The following graph types can be plotted using Carbon:


    Copyright 2017 - present Cerner Innovation, Inc.

    Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.


    npm i @cerner/carbon-graphs

    DownloadsWeekly Downloads






    Unpacked Size

    1.51 MB

    Total Files


    Last publish


    • benbcai
    • ryanthemanuel
    • mraplumb