Chart using Prime React

[sbhuyan]

We use prime react in one of our project, and there was this need where we had to show a bar graph (histogram) in one of the page.

I have made the changes and it shows the graph, but above some bar graphs we need to show an icon, i'm unable to figure out how to display an icon and text on top of the bar graph.
I see in chart.js there is a plugin called chartjs-plugin-annotation (https://www.chartjs.org/chartjs-plugin- ... st/guide/ ) I'm unable to use this with my current setup.

Code: Select all

const options = {
    maintainAspectRatio: false,
    aspectRatio: 0.8,
    plugins: {
      legend: {
        labels: {
          fontColor: textColor
        },
        display: false
      },
      annotation: {
        annotations: {
          // define annotations here
        }
      }
    },
    scales: {
      x: {
        stacked: true,
        ticks: {
          color: textColorSecondary,
          font: {
            weight: 500
          }
        },
        grid: {
          display: false,
          drawBorder: false
        }
      },
      y: {
        stacked: true,
        ticks: {
          color: textColorSecondary
        },
        grid: {
          display: false,
          drawBorder: false
        }
      }
    }
  };
  
  const pureCostDatasets = [
    {
      type: 'bar',
      label: 'Storage Hardware',
      backgroundColor: PURE_DATA_COLORS.ORANGE,
      data: [50, 25, 12, 48, 90, 76, 42],
      stack: 'Stack 0',
      barPercentage: barWidth,
      categoryPercentage: categoryWidth
    },
    {
      type: 'bar',
      label: 'Support and Services',
      backgroundColor: PURE_DATA_COLORS.LIGHT_ORANGE,
      data: [21, 84, 24, 75, 37, 65, 34],
      stack: 'Stack 0',
      barPercentage: barWidth,
      categoryPercentage: categoryWidth
    },
    {
      type: 'bar',
      label: 'Credit',
      backgroundColor: PURE_DATA_COLORS.GRAY,
      data: [-25, 0, 0, 0, 0, 0, 0],
      stack: 'Stack 0',
      barPercentage: barWidth,
      categoryPercentage: categoryWidth
    }
  ];
  
  <Chart type="bar" data={pureCostDatasets} options={chartOptions} />
  

can someone please help me out on this.