CODEWITHSUNDEEP
angularechartsngx-echarts
Felipe Romero
Felipe Romero

Reputation: 1

Echarts timeline with 3 categories in Angular

Example Graph make with highcharts

I'm having difficulty putting together a chart similar to this using Echarts and ngx-echarts, has anyone experienced this too?

Using

"@angular/animations": "^17.1.2",
"@angular/common": "^17.1.2",
"@angular/compiler": "^17.1.2",
"@angular/core": "^17.1.2",
"@angular/forms": "^17.1.2",
"@angular/platform-browser": "^17.1.2",
"@angular/platform-browser-dynamic": "^17.1.2",
"echarts": "^5.5.0",
"ngx-echarts": "^17.1.0",

Upvotes: 0

Views: 74

Answers (1)

Matthias Mertens
Matthias Mertens

Reputation: 2541

You could use stacked bar charts with a transparent helper bar. Unfortunately, stack does not work with axis type 'time'.

Alternatively, there exists this official echarts example of a custom series type.

Example:

const start = 1706770434136;
const day = 1000 * 60 * 60 * 24;

option = {
  title: {
    text: 'Title'
  },
  xAxis: [
    {
      name: 'days',
      type: 'value',
      splitLine: { show: false },
      axisLabel: {formatter: (value) => new Date(value + start).toUTCString()}    // could need some better formatting
    },
  ],
  yAxis: {
    type: 'category',
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { show: true },
    data: [
      'NORMAL',
      'ALERTA',
      'PERIGO'
    ]
  },
  series: [
    {
      type: 'bar',
      stack: 'stack',
      data: [1 * day, 97 * day, 102 * day],
      itemStyle: {color: 'transparent'}
    },
    {
      type: 'bar',
      stack: 'stack',
      // colorBy: 'data',         if specific color doesnt matter
      itemStyle: {
        borderWidth: 2,
        borderColor: 'grey',
        borderRadius: 10
      },
      data: [
        {value: 96 * day, itemStyle: {color: 'lightgreen'}},
        {value: 5 * day, itemStyle: {color: 'orange'}},
        {value: 23 * day, itemStyle: {color: 'red'}},
      ]
    },
  ]
};

Upvotes: 0

Related Questions