How I can give variable spaces between bars of [double] bar chart in chart.js using with angular

125
February 11, 2018, at 03:41 AM

I am creating a double vertical bar chart in chart.js. And want to give more space between first set of double bar and rest of all other set of bars. For example :

"barData": [
   [6.8, 16.5, 10.7, 15.4, 13.3, 15.2, 5.2],
   [7.3, 16.5, 10.4, 11.3, 13.2, 6.2, 5.1]
 ]

At the time of double chart creation first 1 element from both internal arrays will create 2 bars and so on. So my first data will always be special so want to highlight it by separating it with more spaces than others. And I tried with 2 canvas beside each other but there is some bar height ratio issue that doesn't match in both charts. For example: First chart data

"firstChartData" :[
    [6.8],
    [7.3]
    ]

Second chart data

"secondChartData": [
   [16.5, 10.7, 15.4, 13.3, 15.2, 5.2],
   [16.5, 10.4, 11.3, 13.2, 6.2, 5.1]
 ]

Please help me here to do this.

READ ALSO
How to use bootstrap styling in django project

How to use bootstrap styling in django project

I have downloaded bootstrap files (css, js) and put in the static folder of my project and made changes in header section of indexhtml as shown in the below code

222
How to use css in Laravel

How to use css in Laravel

Laravel noob here

192
How to force a header and footer to stay visible on the page using CSS grid?

How to force a header and footer to stay visible on the page using CSS grid?

I would like to render a page which has a fixed header and footer and a scrollable (if needed) middle part (which made of a sidebar and a main content area) - using CSS Grid

132