Bar chart datapoints specified through sparse data of x and y co-ordinates like scatter chart

Feature Proposal

passing sparse data to bar chart instead of using labels for the whole chart , this way i can specify for the 2 different bar charts different labels

Feature Use Case

when a user has 2 bar charts on the same chart , my case for example, they are drawn with logged data along with time values , however the snapshot for time for the first data point of the first bar is not always equal to the the time for the first data point of the second chart , what i would like to have is passing sparse data of x and y co-ordinates to the bar chart same way i am passing them to the scatter chart type, i have searched around for this and all i could find was this #4565 but i couldn’t find an example to show this is implemented .

Author: Fantashit

1 thought on “Bar chart datapoints specified through sparse data of x and y co-ordinates like scatter chart

  1. well i got this to work , for anyone wondering how to get it working and his search leads him here . this is what i deduced after some trial and error 😄 ,

    first of all bar by default for chartjs didn’t support the display of bar using (x,y) points however a while ago in #4565 there was a merge which fixed this , but the problem afterwards was the following , first of all you need the labels array to contain all the labels for both bar charts.
    taking the following as an example :
    2 bar charts are to be drawn , the first has the following points (0,2) , (1,3) , (2,3) , (3,4) and the second has the following set of points (1,6) (2,4) and (3,5)

    notice how the first point (0,2) doesn’t exist on the second set of points this is what you will have to do

    the labels array shall contain [0,1,2,3] which are all the x point values, keep in mind these need to be sorted since they will be working with chartjs category x-axis , since using linear breaks the bar chart to not display (at least for me it did maybe i was doing something wrong 😃 )

    now for the data sets, specify them the same way you would specify for a scatter chart BUT with the points where they do not exist they need to contain ‘null’ for the Y axis and X axis or both values null

    thus the supplied data for the first data set would be : [{x:0,y:2},{x:1,y:3},{x:2,y:3},{x:3,y:4}]
    and the supplied data for the second data set would be : [{x:null,y:null},{x:1,y:6},{x:2,y:4},{x:3,y:5}] or the first entry to be {x:0,y:null} both will yield the same thing which is not displaying a bar at the specified X position

    this is my code for the above and the generated graph , i am also using a scatter char with line amidst all this , bear in mind this is using ng2-charts , since i am using chartjs on an ionic 3 app 😃 Hope this helps

    Code:

        this.chartdata.push(
          {
            label: "Scatter",
            data: [{x:0,y:1},{x:1,y:2},{x:2,y:2},{x:3,y:2}],
            type: "scatter",
            fill: "false",
            showLine:true
          }
        )
        this.chartdata.push(
            {
              label: "Bar",
              data: [{x:0,y:2},{x:1,y:3},{x:2,y:3},{x:3,y:4}],
              fill: "true",
              showLine:false
            }
        )
        this.chartdata.push(
          {
            label: "Bar",
            data: [{x:0,y:null},{x:1,y:6},{x:2,y:4},{x:3,y:5}],
            fill: "true",
            showLine:false
          }
      ) 
    

    and the ouptut :

    image

Comments are closed.