score:2
Accepted answer
yes, you can use scriptable options if you want the dot to not show, you can also pass null
values so the point gets skipped or you can use the object format to specify to which labels the datapoint needs to be matched:
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: 'scriptable radius',
data: [12, 19, 0, 5, 2, 3],
bordercolor: 'pink',
backgroundcolor: 'pink',
radius: (ctx, a, b) => (ctx.parsed.y === 0 ? 0 : 8)
},
{
label: 'null value',
data: [7, 11, null, 8, 3, 7],
bordercolor: 'orange',
backgroundcolor: 'orange'
},
{
label: 'object notation',
data: [{
x: 'red',
y: 6
}, {
x: 'blue',
y: 4
}, {
x: 'green',
y: 8
}, {
x: 'purple',
y: 12
}, {
x: 'orange',
y: 3
}, ],
bordercolor: 'lime',
backgroundcolor: 'lime'
}
]
},
options: {}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Chart.js - Avoid line to goes to zero and remove dot for this situation
- How to remove Grid lines except for zero line and border Chartjs?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How do you set x and y axis and Title for a line chart using charts.js?
- Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- ChartJS: Is this horizontal stacked bar and line graph multiaxis chart even possible?
- Chart Js Change Label orientation on x-Axis for Line Charts
- Remove the vertical line in the chart js line chart
- Chart.js how to show cursor pointer for labels & legends in line chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- Chart.js Mixed Bar and Line chart with different scales
- chart.js Line chart with different background colors for each section
- Problem for display a chart with Chart.js and Angular
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Draw a horizontal and vertical line on mouse hover in chart js
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Remove the label and show only value in tooltips of a bar chart
- how to set chart.js grid color for line chart
- Can we draw a Line Chart with both solid and dotted line in it?
- ChartJS Line chart cut off at the top and bottom
- Multiple line labels for chart js
- Remove Angularjs-Chart border and reduce chart arc thickness
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS line chart drag and zoom
- Add a text as tooltip for each point on a line chart
More Query from same tag
- Tooltip vertically off with overlapping data, in ChartJS
- Change background color of all charts beside the one hovered
- dyamically constructing javascript object
- Create a prop for a chart.js pie chart
- Passing an Array from a Flask view to the javascript code of another view
- Display totals for Label (or simply display a string) inside a chart in Chart.js
- How to adjust spaces between points in chart js?
- how to dynamically render and update chart.js line graph
- problem with chart js pie chart dataset data
- Getting the postion of the y-axis labels in chartJS
- Charts.JS - Too Many Charts? - Loading Issue
- Chart JS dataset disabled by default
- Group bar chart in ReactChartJS2 click particular element
- Secondary bar with chart.js
- How to get data from JSON for chart.js, using vue.js
- Chart.js Y Axis Wrong Step Count
- Adding custom text to Bar Chart label values using Chart.js
- Chart.js Y-Axis data not rendering
- chartjs hover over data without hoveringing on line
- trying to get minIndex and maxIndex from x-axis-0
- Chart.js 2 - Always display only some tooltips in bubble chart
- Chart.js combined line and bar chart with differing data points
- chart js 3 radar, how to enabe multiline labels
- Chartjs create chart with big data and fixed labels
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to center bars on x-axis of Chart.js bar graph?
- chartjs 2.7 how to add labels in center of horizontal bar graph
- Need to customize graph behaviour
- How to have custom colors in ng2-charts and chart.js according to data?
- How to make label always visible on DoughnutChart.js