pretty-charts v1.1.2

Pretty charts

Installation

To install via npm:

npm install --save pretty-charts

This project is made for generating various charts. All the charts are made with svg.

Generating chart

For an example:

import Charts from 'pretty-charts';

const dataObj = {
  name: String,
  value: Number,
  color: String,
  hover: String,
  border: String
}

const fieldColorsObj = {
  color: String,
  border: String
}

const config = {
  container: document.querySelector('#container'),
  svgRoot: document.querySelector('svg'),
  positive: Boolean,
  step: Number,
  animate: Boolean,
  multipleData: Boolean,
  pointType: String,
  columns: [ String ],
  columnColors: [ fieldColorsObj ],
  data: [ dataObj ]
}

const someChart = new Charts.SomeChart(config);
someChart.draw();

container is a container in which the svg is placed also a tooltip is placed in this container.

svgRoot is the <svg></svg> element.

positive says if the negative values should be displayed on chart. If multiple data is set to true then data should be an array of arrays of dataObj.

data is a data which will be displayed on a chart.

animate at this moment if true, it animates only lines, scatter, vertical bar and stacked vertical bar chart.

multipleData set to true if you want to display multiple sets of data on chart. At this moment available only on Lines chart.

columns if not set then column names will be data item's names. Necessary if multiple sets of data are used.

fieldColors is an array of objects containing data about colors used for fields in Radar chart. If there is no border property, then color property is used.

pointType is the point that you want to use in a chart (e.g. line, scatter). Possible values: "star", "circle". Circle is default.

name is just a name of this value.

value is just what the name suggests.

color is the base color for the element on the chart displaying it.

hover is the color lighter than the color used for the hover of the element.

border is the color of the border of the element of the chart.

step is by how much the scale increases/decreases.

Properties with // * // are necessary for the given chart.

Also method draw returns all the hoverable elements(bars, slices, points etc) in case you wanted to add some additional events.

Charts

There are currently following charts implemented:

1. Pie chart
2. Doughnut chart
3. Horizontal Bar chart
4. Vertical Bar chart
5. Lines chart
6. Radar chart
7. Scatter chart
8. Stacked Vertical Bar chart

Pie

const config = {
  container: HTMLElement, // * //
  svgRoot: <svg></svg>, // * //
  data: [
      {
        name: String,
        value: Number > 0,
        color: String,
        hover: String,
        border: String
      }
    ] // * //
}

const pie = new Pie(config);
pie.draw();

Doughnut

const config = {
  container: HTMLElement, // * //
  svgRoot: <svg></svg>, // * //
  data: [
      {
        name: String,
        value: Number > 0,
        color: String,
        hover: String,
        border: String
      }
    ] // * //
}

const doughnut = new Doughnut(config);
doughnut.draw();

HorizontalBar

const config = {
  container: HTMLElement, // * //
  svgRoot: <svg></svg>, // * //
  step: Number, // * //
  positive: Boolean,
  multipleData: Boolean,
  columns: [ String ],
  data: [
      {
        name: String,
        value: Number,
        color: String,
        hover: String,
        border: String
      }
    ] // * //
}

const bar = new HorizontalBar(config);
bar.draw();

VerticalBar

const config = {
  container: HTMLElement, // * //
  svgRoot: <svg></svg>, // * //
  step: Number, // * //
  positive: Boolean,
  multipleData: Boolean,
  animate: Boolean,
  columns: [ String ],
  fieldColors: [
    {
      color: String,
      hover: String,
      border: String
    }
  ],
  data: [
      {
        name: String,
        value: Number,
        color: String,
        hover: String,
        border: String
      }
    ] // * //
}

const bar = new VerticalBar(config);
bar.draw();

Lines

const config = {
  container: HTMLElement, // * //
  svgRoot: <svg></svg>, // * //
  step: Number, // * //
  positive: Boolean,
  multipleData: Boolean,
  columns: [ String ],
  animate: Boolean,
  data: [
    {
      name: String,
      value: Number,
      color: String,
      hover: String,
      border: String
    }
  ] // * //
}

const bar = new Lines(config);
bar.draw();

Radar

const fieldColorsObj = {
  color: String,
  border: String
}

const config = {
  container: HTMLElement, // * //
  svgRoot: <svg></svg>, // * //
  step: Number, // * //
  multipleData: Boolean,
  fieldColors: [ fieldColorsObj ], // * //
  data: [
    {
      name: String,
      value: Number,
      color: String,
      hover: String,
      border: String
    }
  ] // * //
}

const radar = new Radar(config);
radar.draw();

Scatter

const fieldColorsObj = {
  color: String,
  border: String
}

const config = {
  container: HTMLElement, // * //
  svgRoot: <svg></svg>, // * //
  positive: Boolean,
  multipleData: Boolean,
  fieldColors: [ fieldColorsObj ],
  stepX: Number, // * //
  stepY: Number, // * //
  animate: Boolean,
  data: [
    {
      name: String,
      x: Number,
      y: Number,
      color: String,
      hover: String,
      border: String
    }
  ] // * //
}

const scatter = new Scatter(config);
scatter.draw();

If fieldColors is defined, then colors from this property will be taken and all the points from from coresponding data will have the same color. If all points are supposed to have different colors, then specify the colors in data.

stepX and stepY are steps for the both lines.

StackedVerticalBar

const config = {
  container: HTMLElement, // * //
  svgRoot: <svg></svg>, // * //
  step: Number, // * //
  positive: Boolean,
  animate: Boolean,
  columns: [ String ], // * //
  fieldColors: [
    {
      color: String, 
      hover: String,
      border: String
    }
  ],
  data: [
    {
      name: String,
      value: Number,
      color: String,
      hover: String,
      border: String
    }
  ] // * //   
}

const bar = new StackedVerticalChart(config);
bar.draw();