UDChart Display Data Value on Top of Bar

Universal Dashboard Universal Dashboard Help
1

Hi All -

I found a thread in stackoverflow discussing this. From what I can see, they set an option - namely animation. However, I have no idea how to translate it into UD/PS. Initially, I was using NivoChart, but I cant figure out how to assign specific color if a condition is met. Your help is much appreciated.

https://jsfiddle.net/x75ehyco/1/

    scales: {
      yAxes: [{
        ticks: {          
          beginAtZero: true,
        }
      }]
    },
    animation: {
      duration: 1,
      onComplete: function() {
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            if (dataset.data[index] > 0) {
              var data = dataset.data[index];
              ctx.fillText(data, bar._model.x, bar._model.y);
            }
          });
        });
2

There currently isn’t a way to override JavaScript functions like this with PowerShell. We’d have to implement this with either a custom component or by extending the built in Chart component to some how extend the API for PowerShell.

I’ve considered just allowing for arbitrary JS to be injected to allow for “anything” but it currently doesn’t work like that. It’s possible have a callback execute some PowerShell when the chart calls this function but I worry that would be very slow for large data sets.

3

Thanks for the update Adam, appreciate it.

I believe UDchart (ChartJS) will be phased out to be replaced by Nivo Chart in UDv3. I hope whenever you are free, you can play around with Nivo Chart - I am looking at customizing the bar chart color (based on certain logic), change font size / weight etc, display legend.

4

I’m considering pull the ChartJS stuff into the Charts library so you’ll still be able to use that in v3 as a stand alone component. That should give you and others the choice on what library to use. I think Nivo is nice and offers a ton of options but I agree that ChartJS has its merits as well.