0

I have created line chart using chart.js 4.2.1 and created vertical line using chartjs plugin annotation 2.2.1, I tried to show the label at top of vertical line. But the labels are cutoff.

enter image description here

But expectation should be labels need to be show at top of each vertical lines and below of each vertical lines. Sometimes a vertical line need to draw below the xaxis also

I have tried like this:

annotation: {
        type: "label",
        xValue: value // xPosition
        yValue: value // yPosition It is maximum of value from dataset
        content: "content",
        font: {
            size: 12
        },
        color: "#fff",
        padding: 0,
        position: "center,
        xAdjust: 20,
    };

actual expectation should be below enter image description here

user2057925
  • 2,377
  • 1
  • 12
  • 12
FrontEnd
  • 21
  • 4
  • You can set clip: false (at plugin options level) in order to draw the label outside of chart area. You can also change position option of the annotation (using start or end) in order to draw the label depending on the point use as locator. Maybe you can create a sample where we can provide you the changes to apply. – user2057925 Apr 26 '23 at 09:33
  • @user2057925 - Please find working example here https://codesandbox.io/s/react-chartjs-2-example-forked-57zjov?file=/src/AreaChart.jsx , In this line and labels are not shown but in my real project it was showing, only issue which i was facing is labels on top or labels on below are cutoff, this is showstopper for us for a long time please suggest any – FrontEnd Apr 27 '23 at 06:30
  • I have forked. See here: https://codesandbox.io/s/react-chartjs-2-example-forked-978lzi?file=/src/AreaChart.jsx Note: added clip:false in getAnnotationLabel function to enable the plugin to draw outside of chart area. – user2057925 Apr 27 '23 at 09:30
  • @user2057925 - Labels are showing properly now with the help of clip: false. Now I have facing another challenge, how to extend the lines to near the labels. For example dotted line indicated the price, using YAdjust i have changed the position that corresponding position need to add that price line also, like the same for PR line also but pr in below, code updated as per discussion please suggest me – FrontEnd Apr 27 '23 at 10:16
  • @user2057925 - see here for my expectation [https://i.stack.imgur.com/Tccs9.png]. This is done by using d3. But am unable to get the same in chart js. please help me in this case since we are at show stopper to client – FrontEnd Apr 27 '23 at 11:07
  • You could use the "callout" of the annotation label to draw the dotted line and the line over the scale. I could create a sample but I need time to do it. – user2057925 Apr 27 '23 at 16:15
  • Just an example: https://codepen.io/stockinail/pen/wvYedXy You could also use afterDraw hook (at annotation level) to the draw the lines by yourself. – user2057925 Apr 27 '23 at 16:33
  • @user2057925 - Thank You, you are my life savior. It works as expected – FrontEnd Apr 28 '23 at 05:58
  • @user2057925 - From the dataset, I have taken minimum value, That min value I have assigned to scales -> y -> min [ getScales() ]. to plot the vertical lines from the axis. If we didnt set the min and max, chart itself round of the next value in axis and it gives some space b/w the axis and vertical line didn't touch the axis because of vertical line starting point is minimum value from dataset. but axes generates extra points to round of the value. How to draw a vertical line touches to xaxis even if round of data in axis line? Please guide me in this case – FrontEnd May 02 '23 at 04:15
  • apologize but not clear to me. Do you have a codepen to show me what is wrong or not working as expected? – user2057925 May 02 '23 at 08:48
  • @user2057925 - apologies The vertical lines which plotted is not start from the axis, but now I have fixed that by removing of "yMin" in annotation line config. And few more show stoppers are right now (1) I have drawn callout based on your example [https://codepen.io/stockinail/pen/wvYedXy] but here label top callout there is horizontal line right (under the label), that how should I remove(horizontal line alone)? – FrontEnd May 04 '23 at 03:17
  • @user2057925 - (2). here [https://codesandbox.io/s/react-chartjs-2-example-forked-978lzi?file=/src/AreaChart.jsx] I have filled with solid red and green color bg conditionally, but have to apply gradient color from top to bottom for that I tried to give this `var ctx = document.getElementById('myChart').getContext("2d"); var gds = ctx.createLinearGradient(0,0,0,500); gds.addColorStop(0, "rgba(255, 130, 109, 0.7)"); gds.addColorStop(1, "rgba(255, 130, 109, 0.001)");` but the value of this parameters need to change as per the negative and positive position. – FrontEnd May 04 '23 at 03:20
  • @user2057925 - How to fill gradient from top to bottom in negative area from top red opacity 1 to botttom opacity 0, in positive are top green opacity 1 to bottom opacity 0. – FrontEnd May 04 '23 at 03:21
  • about (1), that's not possible at the moment. The callout draws always that part. Maybe a enhancement to the plugin could be addressed. (2) if I see correctly, you want to use it on segment. the positive or negative can switch the 0 and 1 you use creating the gradient. Nevertheless, to use gradient on segment, I would suggest you to use Chart.js 4.3.0 where the issue https://github.com/chartjs/Chart.js/issues/11204 has been solved. – user2057925 May 04 '23 at 05:47
  • @user2057925 - working example [https://codesandbox.io/s/react-chartjs-2-example-forked-978lzi?file=/src/AreaChart.jsx] if see tooltip body content like Expected PL: 500 right? In this I want to customise the color Expected PL: is black and for value (500) if it is +ve green , red for -ve values. I tried to get this but no luck – FrontEnd May 04 '23 at 17:37
  • @user2057925 - `callbacks: {title: function(tooltipItem: any[]) { return `When Spot is ${tooltipItem[ 0 ].label}`; }, beforeBody: function(tooltipItem: any[]) {return "Expected P&L on"; }, label: function(tooltipItem: any) { const value = tooltipItem.dataset.data[ tooltipItem.dataIndex ]; return `${tooltipItem.dataset.label}: ${value.toFixed(2)}`; }, afterLabel: function(context: any) { return
    Custom after label content
    ; },}`     – FrontEnd May 04 '23 at 17:42
  • @user2057925 - Awaiting for your kind help, helpless to do this – FrontEnd May 05 '23 at 09:52
  • having a look to the sandbox, I don't find any tooltip callback. Anyway, you cannot change part of the label color. If you need it, you have to implement a custom tooltip. – user2057925 May 08 '23 at 07:02
  • @user2057925 - could you check this if any suggestions are most welcome [https://stackoverflow.com/questions/76214710/how-to-create-rrg-relative-rotation-graph-using-chartjs-or-d3-with-tooltip] I would like to create RRG pattern using chartjs is that possible ? – FrontEnd May 10 '23 at 03:36
  • See sample https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/box/gradient.html. It could help, I guess – user2057925 May 10 '23 at 15:14

0 Answers0