Konrad Stępień staff commented 3 years ago

Hi,

You need only change the label of X and Y-axis? And then sets the value for this?

What graph do you need?

itay pro commented 3 years ago

Here is a good example: https://xkcd.mscha.org/jjjdavidson/timeofday.BlitzGirl.114days.svg

Konrad Stępień staff commented 3 years ago

maybe something like this?

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  public chartType = 'bar';

  public chartDatasets: Array<any> = [
    { data: [1, 1.5, -1, 3, 1, 2, 0], label: 'My First dataset' },
    { data: [2, -2, -1, 0, 2, 3, 0], label: 'My Second dataset' },
  ];

  public chartLabels: Array<any> = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00'];

  public chartColors: Array<any> = [
    {
      backgroundColor: [
        'rgba(54, 162, 235, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(54, 162, 235, 0.2)',
      ],
      borderColor: [
        'rgba(54, 162, 235, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(54, 162, 235, 1)',
      ],
      borderWidth: 1,
    },
    {
      backgroundColor: [
        'rgba(255, 125, 158, 0.2)',
        'rgba(255, 125, 158, 0.2)',
        'rgba(255, 125, 158, 0.2)',
        'rgba(255, 125, 158, 0.2)',
        'rgba(255, 125, 158, 0.2)',
        'rgba(255, 125, 158, 0.2)',
      ],
      borderColor: [
        'rgba(255, 125, 158, 1)',
        'rgba(255, 125, 158, 1)',
        'rgba(255, 125, 158, 1)',
        'rgba(255, 125, 158, 1)',
        'rgba(255, 125, 158, 1)',
        'rgba(255, 125, 158, 1)',
      ],
      borderWidth: 2,
    },
  ];

  public chartOptions: any = {
    responsive: true,
    scales: {
      xAxes: [
        {
          stacked: true,
          categoryPercentage: 1.0,
          barPercentage: 1.0,
        },
      ],
      yAxes: [
        {
          stacked: false,
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };
  public chartClicked(): void {}
  public chartHovered(): void {}
}

itay pro commented 3 years ago

I'll give it a try