score:5

Accepted answer

here is an example to get the point style you are after:

documentation for point options for line chart can be found here

a codepen of the below code here

html:

<html>
  <body>
    <div class="mychartdiv">
      <canvas id="mychart" width="600" height="400"></canvas>
    </div>
  </body>
</html>

js:

new chart(document.getelementbyid("mychart"), {
  type: "line",
  data: {
    labels: ["january", "february", "march", "april", "may", "june"],
    datasets: [
      {
        label: "my first dataset",
        data: [20, 25, 22, 19, 31, 40],
        fill: true,
        bordercolor: "rgb(75, 192, 192)",
        backgroundcolor: "rgba(0,0,0,0.1)",
        borderwidth: 2,
        linetension: 0,
        /* point options */
        pointbordercolor: "blue", // blue point border
        pointbackgroundcolor: "white", // wite point fill
        pointborderwidth: 1, // point border width
      }
    ]
  },
  options: {
    legend: {
      labels: {
        usepointstyle: true, // show legend as point instead of box
        fontsize: 10 // legend point size is based on fontsize
      }
    }
  }
});

Related Query

More Query from same tag