[Chartjs]-ChartJS: create linear x-axis on bar chart

by

3👍

✅

You can achieve the first thing by just using below

labels: SeriesData.map(i => Number(i.x) === i.x && i.x % 1 === 0 ? i.x: ""),

This will blank it when it has a fractional value. For the 2nd part you should create jsFiddle and post the same

You can see the fiddle for this

https://jsfiddle.net/jxkc3mtd/

1👍

To show the annotation you may use a box (because vertical line is not documented correctly)

You need to add annoation to your options property: 

  options: {
    annotation: {
      annotations: [{
        drawTime: "beforeDatasetsDraw",
        type: 'box',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        xMin: 2.3,
        xMax: 2.3,
        yMin: 0,
        yMax: 20,
        backgroundColor: 'lightgrey',
        borderColor: 'red'
      }]
    }
  }

Unfortunately this won’t work, if you don’t create a label for 2.3.
So you need to display the labels (which you dn’t want to show, 1.1, 1.2 etc.) as white.

I have modified the example of the first answer:
https://jsfiddle.net/t1za02wr/12/

Leave a comment