Line Chart

Line Chart

Sections

• Sample
• Properties
  • dataModel
    • Object Keys
  • alertText
  • dateFormat

Sample

<template>
  <div>
      <line-chart
        :dataModel='lineChartData'
        title='Example Line Chart'
        alertText="Incident Volume"
      />
  </div>
</template>

<script>

import {D3LineChart} from 'jscatalyst'
export default{
  data(){
    return{
      lineChartData: [] // See dataModel property
    }
  },
  components:{
    lineChart: D3LineChart
  }
}

</script>

Properties

dataModel

Type: Array

The dataModel of D3LineChart takes an array of objects, with each object representing a unique data point.

lineChartData = [
  { date: "2017-1-1", value: 2 },
  { date: "2017-4-1", value: 5 },
  { date: "2017-2-1", value: 1 },
  { date: "2017-3-1", value: 6 },
  { date: "2017-5-10", value: 1 },
  { date: "2017-6-10", value: 16 },
  { date: "2017-7-10", value: 18 },
  { date: "2017-8-10", value: 7 },
  { date: "2017-9-10", value: 5 },
  { date: "2017-10-10", value: 1 },
  { date: "2017-11-10", value: 2 },
  { date: "2017-12-10", value: 10 }
];

dataModel Object Keys:

• date

  Type: String

  The date key points to a date string written in valid date format.

• value

  Type: Number

  The actual value of the data point

alertText

Type: String

The name of the data described by the dataModel.value. Rendered as the label for the Y-Axis as well as the laebl for the value in the window rendered when hovering over data.

dateFormat

Type: String

Set the format of the dataModel.date according to valid D3 Date formats.

Default: "YYYY-MM-DD"

<--- Back to Top