How to display label data ONLY if the value is negative?

[Phil353556]

Hello,

I look at the example and modify to have a negative value and to make the color red if <0
https://naver.github.io/billboard.js/demo/#Data.DataLabelColors

It works, of course, however I should like to display the label ONLY for negative values otherwise, it can be unreadable.
as we can see on this screenshot

Is it possible to do that and how to modify these lines?

labels: {
      colors: function(color, d) { return d.value <0 ? "red" : color }
    }

Thank you so much
Phil

[Phil353556]

I found this workaround, however is there another better solution?

  labels: {
      colors: function(color, d) { return d.value < 0 ? "red" : 'white' ; }
    }

however it display in white color, I should want nothing or transparent color

What about this?

labels: {
      colors: function(color, d) { return d.value < 0 ? "red" : "transparent"; }
    }

[netil]

@Phil353556, if want to show only negative value, use data.labels.format instead.

bb.generate({
	data: {
		columns: [
			["data1", 30, -200, -100, 400, 150, 250],
			["data2", -50, 150, -150, 150, -50, -150]
		],
		labels: {
			format: v => v < 0 ? v : null
		}
	}
})

[Phil353556]

Hi @netil,
Thank you so much for your answer.

Another question, how to add a comment on a graph?
I found something like below but I'm sure there is a better way to do.

<style> .annotation { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); background-color: red; padding: 10px; border: 1px solid black; z-index: 10; } </style>

comment comment comment comment

Phil

[netil]

If you're finding solution from the option, you can use title option. Otherwise, you need to add your own customizing dom with styles.

[Phil353556]

Hello @netil

Of course this is working:
labels: {
format: v => v < 0 ? v : null
}

however the value is not written in red color but with the color of the line.
Is it possible to display negative values in red color ?
Thank you
Phil

[netil]

for color, need to specify data.lables.colors option. So you need to combine options.

bb.generate({
	data: {
		columns: [
			["data1", 30, -200, -100, 400, 150, 250],
			["data2", -50, 150, -150, 150, -50, -150]
		],
		labels: {
			format: v => v < 0 ? v : null,
			colors: "red"
		}
	}
});

[Phil353556]

That's perfect, thank you so much.
Have a good day
Phil