tabler-ui/src/_data/charts.yml

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

tasks:
  name: Tasks
  type: line
  categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
  groups: [1, 2, 3]
  hide-points: true
  fill: true
  remove-padding: true
  hide-tooltip: true
  legend-position: 'top'
  series:
    - name: 'New'
      color: blue
      data: [0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0]
    - name: 'Completed'
      color: lime
      data: [0, 0, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 0]
    - name: 'Closed'
      color: orange
      data: [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]

development-activity:
  name: Development Activity
  type: area
  groups: [1, 2, 3]
  hide-points: true
  hide-tooltip: true
  remove-padding: true
  legend-position: 'top'
  series:
    - name: 'Purchases'
      color: blue
      data: [0, 5, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 6, 30, 10, 10, 15, 14, 47, 65, 55]

employment:
  name: Employment Growth
  display: true
  type: line
  hide-legend: true
  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
  series:
    - name: Development
      color: orange
      data: [2, 8, 6, 7, 14, 11]
    - name: Marketing
      color: blue
      data: [5, 15, 11, 15, 21, 25]
    - name: Sales
      color: green
      data: [17, 18, 21, 20, 30, 29]

temperature:
  name: Monthly Average Temperature
  display: true
  type: line
  show-labels: true
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Tokyo
      color: blue
      data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    - name: London
      color: green
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]


area:
  name: Lorem ipsum
  display: true
  type: area
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


area-spline:
  name: Lorem ipsum
  display: true
  type: area-spline
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


area-spline-sracked:
  name: Lorem ipsum
  display: true
  type: area-spline
  hide-legend: true
  groups: [1, 2]
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


spline:
  name: Wind speed during two days
  display: true
  type: spline
  show-labels: true
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Hestavollane
      color: blue
      data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
    - name: Vik
      color: green
      data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]


spline-rotated:
  name: Lorem ipsum
  display: true
  type: spline
  rotated: true
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


step:
  name: Lorem ipsum
  display: true
  type: step
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


area-step:
  name: Lorem ipsum
  display: true
  type: area-step
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


bar:
  name: Lorem ipsum
  display: true
  type: bar
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]

bar-rotated:
  name: Lorem ipsum
  display: true
  type: bar
  rotated: true
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


bar-stacked:
  name: Lorem ipsum
  display: true
  type: bar
  groups: [1, 2]
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


pie:
  name: Lorem ipsum
  display: true
  type: pie
  hide-legend: true
  series:
    - name: A
      color: blue-darker
      data: [63]
    - name: B
      color: blue
      data: [44]
    - name: C
      color: blue-light
      data: [12]
    - name: D
      color: blue-lighter
      data: [14]

donut:
  name: Lorem ipsum
  display: true
  type: donut
  hide-legend: true
  series:
    - name: Maximum
      color: green
      data: [63]
    - name: Minimum
      color: green-light
      data: [37]


scatter:
  name: Lorem ipsum
  display: true
  type: scatter
  hide-legend: true
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  series:
    - name: Maximum
      color: blue
      data: [11, 8, 15, 18, 19, 17]
    - name: Minimum
      color: pink
      data: [7, 7, 5, 7, 9, 12]


combination:
  name: Combination chart
  display: true
  type: bar
  types:
    2: 'line'
    3: 'spline'
  groups: [1, 4]
  hide-legend: true
  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
  series:
    - name: Development
      color: green
      data: [30, 20, 50, 40, 60, 50]
    - name: Marketing
      color: pink
      data: [200, 130, 90, 240, 130, 220]
    - name: Sales
      color: green
      data: [300, 200, 160, 400, 250, 250]
    - name: Sales
      color: blue
      data: [200, 130, 90, 240, 130, 220]