score:0
Accepted answer
instead of setting the dataset property to an empty object, just don't include it in the dataset at all. so
data = { labels: chartlabel, datasets: [sp, nc, spa] };
becomes
data = {
labels: chartlabel,
datasets: []
};
if (sp.label !== undefined) data.datasets.push(sp)
if (nc.label !== undefined) data.datasets.push(nc)
if (spa.label !== undefined) data.datasets.push(spa)
in 2 places
replace the data insertion, point attribute setting by a loop (instead of hardcoding it for 3 datasets). so
setinterval(function() { currentchart.adddata([randomscalingfactor(), randomscalingfactor(), randomscalingfactor()], ++latestlabel); currentchart.datasets[0].points[8].highlightstroke = "rgba(220,0,0,1)"; currentchart.datasets[1].points[8].highlightstroke = "rgba(0,255,0,1)"; currentchart.datasets[2].points[8].highlightstroke = "rgba(0,0,255,1)";
becomes
var d = []
currentchart.datasets.foreach(function(e) {
d.push(randomscalingfactor())
})
currentchart.adddata(d, ++latestlabel);
currentchart.datasets.foreach(function(dataset) {
dataset.points[8].highlightstroke = dataset.points[0].highlightstroke;
})
the highlightstroke for the new point is copied from the highlightstroke for the first point of the same series.
fiddle - http://jsfiddle.net/zs99pw4l/
score:0
currentchart2.datasets.foreach(function(e) {
e.points[e.points.length - 1].highlightfill=e.points[0].highlightfill;
e.points[e.points.length - 1].highlightstroke=e.points[0].highlightstroke;
});
solves the problem too. http://jsfiddle.net/co3l0bdb/5/
Source: stackoverflow.com
Related Query
- How to set global/specific properies when updating line-chart using Chart.js?
- How do you set x and y axis and Title for a line chart using charts.js?
- Chart.js 3.6.2, Angular 10: Logarithmic Line chart Y-Axis problems. How to set and keep Y-Axis properties, even when data changes?
- Chart.js - How to set a line chart dataset as disabled on load
- Moving vertical line when hovering over the chart using chart.js
- How to add an on click event to my Line chart using Chart.js
- how to set chart.js grid color for line chart
- How to dynamically set ChartJs line chart width based on dataset size?
- How to add a horizontal line at a specific point in chart.js when hovering?
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- How to use set the color for each bar in a bar chart using chartjs?
- how to highlight a specific area on chartjs line chart
- How do you set up a chart.js scatter line chart through angular-chart.js?
- ReactJS - Moving vertical line when hovering over Line chart using chart.js v3.7.1
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- How to set up a simple pie chart using React in ChartJS on codesandbox
- Moving vertical line when hovering over the chart using chart.js in v2.9.4
- react-chartjs-2 how to set multiple background levels within a line chart
- How to decrease bottom width of triangle using line chart in chartJs?
- How to set the number of of rows in a line chart in chart.js?
- How to set Solid label in bar chart using Chart JS
- How can I show "No Data" message in Pie Chart when there is no data using VueJS?
- How to Draw a line on chart without a plot point using chart.js
- How to edit my custom tooltips in my line chart using chart.js?
- ng2-charts / chart.js - How to set doughnut/pie chart color on specific labels programatically?
- How to create a line on a chart using chartjs-plugin-annotation
- How to limit chart JS hover to take only one value from each line chart when zoomed out?
- how to draw Line chart using chart.js and datalabels should be shown
- chart.js - how to draw and manage line when only one label present in chart js Linechart
More Query from same tag
- How to disable click in graph ChartJS
- Strange issue with Chart.js bar chart, image scattering
- Chart.js showing old chart on hover
- Radar Chart, Chart.js v3.2 labels customization
- Iterating over an IEnumerable in Javascript for Chartjs
- Chart.js how to set cutoutPercentages for each dataset
- Save data from REST API Get method and use it one more time
- Setting Chart.js Pie-Graph Options
- Cannot find centroid of path
- ChartJS set default axis
- Chart JS add max value to legend
- Pause horizontal scrolling in chart.js for real time data
- Ng2-charts Time xAxes : unwanted high zoom on click
- ChartJS row size
- "Type of import (".../charjs/types/indexsm" has no construct signatures issue on Vue3 and ChartJS?
- Animate Chartist on show
- Vue and Chartjs - Running a simple example of vue-chartjs
- Animation chart js (line), animate chart drawing line by line
- Change position of Chart.js tick labels
- chart.js 2, animate right to left (not top-down)
- Chartjs pie chart not showing from dynamic data
- ChartJS - Moving vertical line is display on top of tooltip
- I need help on Optimization of Laravel Controller
- ChartJS on small screen
- Updating Chart.js Datasets - Array not re-initializing (Jquery / PHP)
- Pass numeric matrix of rgb color values to chartJSRadar() in R
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- Angular data visualisation using chart.js
- Chart.js - doughnut show active segment tooltip (on click of external button)
- dynamic data in ChartJS