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
}
}
}
});
Source: stackoverflow.com
Related Query
- Empty circle - only point strok in line chart for ChartJS
- ChartJS - Line chart issue with only 1 point
- line chart with {x, y} point data displays only 2 values
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- Add a text as tooltip for each point on a line chart
- plot a point on top on line chart in chartjs
- Chartjs backgroundColor for line chart does not appear in Vue app
- VueJS + Chartjs - Chart only renders after code change
- ChartJS Line Chart - Points Connected out of order for Timeseries in Angular 6
- Show label for every data point in line chart
- Trouble with setting background color for Line chart at Chartjs version 3.5.1
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js how to show cursor pointer for labels & legends in line chart
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chartjs linechart with only one point - how to center
- How to display Line Chart dataset point labels with Chart.js?
- ChartJs line chart repaint glitch while hovering over
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- How to display value of only one datapoint in line chart
- Border radius for the bar chart in ChartJS
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
- ChartJS - Line Chart with different size datasets
- Show data dynamically in line chart - ChartJS
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJS: Draw vertical line at data point on chart on mouseover
- Show only nth tick LINE on x-axis for Chart.js diagram
More Query from same tag
- Is there a way to represent date hole in chartjs time series?
- Display JSON data in chartjs
- Google Chart and Chart.Js, Send C# variable to Script side in Asp .NET Core 2.2
- How do you use user input as data values in chart.js?
- Vue.js component for Chart.js - strange issue on AJAX reload
- How to change label color of ng2 chart in angular
- Realtime chart JS in Java obtaining the data from a sensor ;Chart.js: Failed to create chart: can't acquire context from the given item
- Display Time In Y Axis - Bubble Chart
- How to fix chart Legends width-height with overflow scroll in ChartJS
- Cursor pointer change onhover not working in chartjsv3
- How to get data on chart based on selected date (Filtering data Chart JS with datepicker)
- how to pass function variable from one file to another in react
- Remove background on Chartjs v2 fixed tooltips
- Uncaught TypeError: fn is not a function in chart.js
- Chart.js - change the scale background color of Radar type
- How to change X-axis interval in chart.js
- How to draw lines between minimum and maximum value to average value in chartJS?
- Chart.js stacked bar chart in opposite direction
- How to zoom Y axis on time series or X-Y chartjs graph
- Chart.js how to make chart only show the most recent data
- Trying to create chartjs constructor
- Change locale for Chart.js in React
- tooltip messes up bar chart in Chart.js
- Offset left or right of the tooltip chartsjs
- Vertical Punchcard with chartjs
- I'm trying to use chart.js in angular to create a simple bar chart but I'm getting an error as 'legend' type doesn't exist for options
- Limit data in Chart.js with Flask/SQLAlchemy in python
- Changing Dataset for a chart in angular 10
- How can I fix the offset of the gradient to be aligned with the chart points(chart.js)?
- Chart.js Timeseries chart - formatting and missing data values