Range bar chart in ng2-charts

1
votes

I need to implement bar graph for weekly data something like below image. x-axis label will be week1, week2, week3 etc and bar for each day. I just want simple bar graph with weekly seperation no need of fancy colors or anything like below graph.

enter image description here

In ng2-charts bar chart documnetation I saw 2 bars for each year. So how can I achieve multiple bars for each week

enter image description here

1
angularng2-charts

1 Answers

0
votes

Somehow I am able to achieve the functionality by updating the example mentioned in documentation.

I wanted same color for all bars so repeating the same color. Not sure how to pass once for all

  public barChartColors2: Color[] = [
    { backgroundColor: '#35A4E8' },
    { backgroundColor: '#35A4E8' },
    { backgroundColor: '#35A4E8' },
    { backgroundColor: '#35A4E8' },
    { backgroundColor: '#35A4E8' },
    { backgroundColor: '#35A4E8' },
    { backgroundColor: '#35A4E8' }
    ];  

    public barChartData: ChartDataSets[] = [
    { data: [23, 42, 23, 54], label: 'Sunday', stack:'a' },
    { data: [91, 22, 53, 84], label: 'Monday' },
    { data: [51, 62, 23, 47], label: 'Tuesday' },
    { data: [71, 26, 53, 24], label: 'Wednesday' },
    { data: [51, 72, 33, 94], label: 'Thursday' },
    { data: [11, 32, 43, 54], label: 'Friday' },
    { data: [21, 42, 43, 44], label: 'Saturday' } 
    ];

Stackbliz working demo