annotationschart.jsline

Annotations on ChartJs shows on top of the plots when opaque is one

I'm trying to use ChartJS, this is what I get when using annotations plugin with opacity = 0.5

box1: {
    type: "box",
    drawTime: "afterDraw",
    yMin: 22,
    yMax: 40,
    backgroundColor: "rgba(255, 229, 153, 0.5)",
    borderColor: "rgba(100, 100, 100, 0.2)",
},

My issues is that with opacity not equal to 1 the color becomes lighter which is a big issue for my client.

enter image description here

when I put 1 on the opacity, the line gets hidden under the box.

enter image description here

I tried playing around the z object but it's not working. I was using Carbon-Graph which has an equivalent feature called regions. The advantage was the color is preserved without playing around opacity. but with the project I'm working on, I found ChartJs covers more of the requirements than using Carbon-Graph.

https://engineering.cerner.com/carbon-graphs/#/regions/line/multiple-regions

enter image description here

Is there a way to render the graph lines over the annotations boxes so I can keep the opacity to 1?

I found an implementation using an old version of ChartJs 2, it was using yHighlightRange, I found this post here, but since annotation is the recommended way, I'm hoping there's a workaround.

Acceptable Range Highlighting of Background in Chart.js 2.0

Solution

  • I would like to thank @kikon for the answer

    box1: {
    type: "box",
    drawTime: "beforeDraw",
    yMin: 22,
    yMax: 40,
    backgroundColor: "rgba(255, 229, 153, 1)",
    borderColor: "rgba(100, 100, 100, 0.2)",
},

    enter image description here