Charts

Charts

Chart.JS

We are using Chart.JS version 2.0 as the framework for the charts within our framework. Chart.JS recently updated to version 2.0 and now contains 8 total charts for use.

To easily integrate Chart.JS within React, react-chartjs was created.

NOTE: The latest version of react-chartjs is on 0.7.4, which still uses Chart.JS version 1. The code was already completed to now work with version 2 in their chartjs-v2 branch. A fork of of the repository was created and this branch was deployed so that ChartJS version 2 could be used. Once react-chartjs is deployed, switch back to using react-chartjs framework as a dependency. https://github.com/jhudson8/react-chartjs/issues/84 contains the status of when version 2 will be pushed.

Using Charts

Import

Each of these charts can be used from within the framework by simply importing each of the chart types:

• AreaChart
• BarChart
• ColumnChart
• LineChart
• PieChart
• ScatterChart

import {AreaChart} from 'safe-framework'

Also included are Default charts which contain both one of the above charts along with a DataTable.

import {DefaultAreaChart} from 'safe-framework'

How to Use

Any property present in the Chart.JS Documentation can be provided to our custom charts.

<AreaChart
  data={data}
  options={options}
/>

Some custom features were added to each of the charts to allow for easier interaction.

Data

ChartJS allows for data to be provided to each of it's datasets. This data property within the dataset only contains data for that particular dataset. This may not always be practical, so an additional data property was added at the top level of the data object. An Array of Objects can be passed to this object that will be all of the data for the entire chart. Datasets are still provided, but now they don't need the data property, only a property called dataProperty that will be used to determine which property within the data to use extra data from.

const theData = {
  ...
  xAxis: [{
    dataProperty: 'name'
  }],
  yAxis: [{
    dataProperty: 'y'
  }],
  data: [{
    name: 'Some Name',
    y: 56.33,
    ...
  },
  ....
  }]
}

Axes

ChartJS currently supports a property called datasets to be able to provide each of the datasets to the chart, both x and y axes. The xAxis and yAxis properties were added to make a clear separation of each. Each is provided an array of datasets that correspond to the appropriate axis.

const theData = {
  // new way
  xAxis: [{
    dataProperty: 'name'
  }],
  yAxis: [{
    dataProperty: 'y'
  }],
  data: [{
    name: 'Some Name',
    y: 56.33,
    ...
  },

  // ChartJS way
  
  labels: ['Some Name', 'Another Label', ...],
  datasets: [{  
    data: [56.33, 16.12, ....],
    ...
    }
  ....
  }]
}

Options

Options that are provided directly to the chart. These properties can be found in ChartJS's documentation.

Scatter Chart

The Scatter chart is the exception to this. The data is provided differently to ChartJS than how you would with other charts. The Scatter Chart was a plugin with the prior version, but with version 2 was ported into ChartJS. See Scatter Chart Documentation in order to create one.

Default Charts

Default Charts are provided several properties to populate both the chart and table data.

• chartData: The data object containing both the actual data and any axes.
• chartOptions: Options provided directly to the chart. These properties can be found in ChartJS's documentation.
• columns: DataTable's columns.
• tableData: Datatable's data.
• title: Title for the Chart.

<DefaultAreaChart
  chartData={areaSeries}
  chartOptions={chartConfig}
  columns={tableColumns}
  size={'col-xs-12 col-sm-12'}
  tableData={tableData}
  title={'US and USSR nuclear stockpiles'}
/>

Future

There are several features that need to be added to both this framework and ChartJS that will provide for easier to use and a better user experience.

ChartJS Features

• Zooming: It would be nice to have some type of zooming for Charts. Already a ticket in ChartJS for this: https://github.com/nnnick/Chart.js/issues/726
• Data Objects: This feature is currently supported within this framework, but they are working on supporting it in ChartJS. Incorporate these changes once this ticket is done: https://github.com/nnnick/Chart.js/issues/1050
• Drill Downs: Would be helpful to be able to drill down into a dataset into another one. https://github.com/nnnick/Chart.js/issues/1050
• Legend Position: The legend can only be on the bottom or the top of the chart. A feature has been added to ChartJS to add them to both the right and left. https://github.com/nnnick/Chart.js/issues/2059

Safe Features

• Data Functions: In additional to the property dataProperty for axes, add a way to have a function to provide a custom data field.
• Single Data for Default: Add a way to provide just a data property to provide to both the chart and table.