Chartjs-How to show X and Y labels on points in Chart js 2 Line Chart

0👍

Try this one,

<Line
  options={{
    title: {
      display: true
    },
    legend: {
      display: false
    },
    responsive: true,
    tooltips: {
      mode: "index",
      intersect: false,
      callbacks: { //Added callbacks for label
        title: () => {
          return "";
        },
        label: (tooltipItems, data) => {
          return "(" + tooltipItems.xLabel + "," + tooltipItems.yLabel + ")";
        }
      }
    },
    hover: {
      mode: "index",
      intersect: false
    },

    elements: {
      line: {
        fill: false,
        borderWidth: 5
      }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            fontColor: "black"
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 }
          ].map((z) => {
            return z.y;
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: "black",
            fontStyle: "bold",
            labelString: "True Positive Rate"
          }
        }
      ],
      xAxes: [
        {
          ticks: {
            fontColor: "black"
          },
          labels: [
            { x: 80, y: 90 },
            { x: 81, y: 29 },
            { x: 56, y: 36 },
            { x: 55, y: 25 },
            { x: 40, y: 18 }
          ].map((z) => {
            return z.x; // Changed this line
          }),
          scaleLabel: {
            display: true,
            fontSize: 15,
            fontColor: "black",
            fontStyle: "bold",
            labelString: "False Positive Rate"
          }
        }
      ]
    }
  }}
  height={150}
  data={{
    datasets: [
      {
        fill: false,
        borderColor: "#EC932F",
        backgroundColor: "#212F3D",
        pointBorderColor: "#B2BABB",
        pointBackgroundColor: "#D4AC0D",
        pointHoverBackgroundColor: "#D4AC0D",
        pointHoverBorderColor: "black",
        lineTension: 0.1,
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBorderWidth: 2,
        pointRadius: 3,
        pointHitRadius: 10,
        data: [
          { x: 80, y: 90 },
          { x: 81, y: 29 },
          { x: 56, y: 36 },
          { x: 55, y: 25 },
          { x: 40, y: 18 }
        ]
      }
    ]
  }}
/>

Leave a comment