Vega Bar Chart

Elastic Stack Kibana
5

Hi!

I was facing an autosize issue with VEGA-LITE. I finally decided to adapt my code to use VEGA.

Here's the result. Take note that I remove the "Data" section by confidentiality.

Code 
{
  $schema: https://vega.github.io/schema/vega/v5.json
  data: ...
  scales: [
    {
      name: color
      type: ordinal
      domain: {
        data: your_dataset_name
        field: your_field_split
      }
      range: {
        scheme: tableau20
      }
    }
    {
      name: xScale
      type: band
      domain: {
        data: your_dataset_name
        field: your_x_field
      }
      range: width
      padding: 0.2
    }
    {
      name: yScale
      type: linear
      domain: {
        data: formatData
        field: your_y_field
      }
      range: height
      round: true
      zero: true
      nice: true
    }
  ]
  axes: [
    {
      orient: bottom
      scale: xScale
    }
    {
      orient: left
      scale: yScale
    }
  ]
  marks: [
    {
      type: group
      from: {
        facet: {
          data: your_dataset_name
          name: facet
          groupby: your_x_field
        }
      }
      encode: {
        enter: {
          x: {
            scale: xScale
            field: your_x_field
          }
        }
      }
      signals: [
        {
          name: width
          update: bandwidth('xScale')
        }
      ]
      scales: [
        {
          name: pos
          type: band
          range: width
          domain: {
            data: facet
            field: your_split_field
          }
        }
      ]
      marks: [
        {
          name: bars
          type: rect
          from: {
            data: facet
          }
          encode: {
            enter: {
              x: {
                scale: pos
                field: your_split_field
              }
              width: {
                scale: pos
                band: 1
              }
              y: {
                scale: yScale
                field: your_y_field
              }
              y2: {
                scale: yScale
                value: 0
              }
              fill: {
                scale: color
                field: your_split_field
              }
            }
          }
        }
      ]
    }
  ]
}

Regards,
Alexandre