score:4
the main points to achieve this with chartjs (without being an chartjs expert by any means) would be:
method 1 - math
step 1
unless you can get a processed point array from chartjs' internals, you would have to, as chartjs uses bezier curves to draw the graphs, manually convert your point data set into a new point array representing the drawn line.
you would also have to consider scale the same way as chartjs does. as canvas does not provide the points for its bezier method, you will have to calculate them using for example this. you need to pick a resolution and generate new segments between each of the points in the data set.
have in mind though: you can not just use some random control points - you will have to replicate these too for the curve the same way chartjs does, so you need to use its source as basis.
step 2
when both lines are in "bezier form" you will have to limit the range you want to search by finding which segments of the lines are covering the range you want to check them against.
do to this using line.x1 <= range.x1 <= line.x2
and the same for range.x2 of the range you want to search (the y axis is not important in this step).
you should end up having two arrays with line segments that matches the range.
(of course, if you don't need to reuse the curves and only need a single segment, you can just find the segments in step 1 and use that for this step).
step 3
now you need to loop through array one.
for the current segment in array one, you need to test against all the segments in array two doing intersection test using a method such as this one (you can filter down number of tests by checking if the two lines have any overlap on the x-axis).
final
now you can extract the intersecting point (if any) and plot it to chartjs' canvas (and congratulation, you are also halfway to your own chart widget :p ).
method 2 - brute force
step 1
get the bitmap of the canvas.
step 2
define a range you want to search for intersection
calculate the composed color where the two lines meet. this will be the color you search for (you can do a pre-step instead, locating a known intersection and read the pixel value from that point).
step 3
scan line by line (vertically) and test each pixel for color values. you need to use a tolerance range (+/- t%) as the canvas pixels are integer values while your result from mixing is a floating point value.
final
when a pixel has been found add a delta to the value to compensate for line width. plot to canvas.
Source: stackoverflow.com
Related Query
- Chart.js Find intersection Point and Draw a Circle
- Draw line between starting point and Ending point in semi doughnut chart in chart js
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Draw a horizontal and vertical line on mouse hover in chart js
- ChartJS: Draw vertical line at data point on chart on mouseover
- Can we draw a Line Chart with both solid and dotted line in it?
- Find intersection between the chart lines in chartjs
- Chart JS: Ignoring x values and putting point data on first available labels
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Empty circle - only point strok in line chart for ChartJS
- Draw points and lines inside a bar in bar chart
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Chartjs draw line chart where line go back and forth (by chronological order)
- How we can draw a circle in bar chart
- How to Draw a line on chart without a plot point using chart.js
- How do you create rounded corners on the top and bottom of a bar chart and the between 2 part still draw like image?
- 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
- Add space between point of the chart and of the border chart in react-chartjs-2
- Chartjs ignore values and draw chart
- Draw vertical and horizonal lines on the radar chart (like x-y axes)
- In Chart.js set chart title, name of x axis and y axis?
- Chart.js - Increase spacing between legend and chart
- Draw horizontal line on chart in chart.js on v2
- Draw a Chart.js with ajax data and responsive. A few problems and questions
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- Chart.js: bar chart first bar and last bar not displaying in full
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
More Query from same tag
- Chart.js Chart displays but no data
- Trying to refresh label when click on it. Cannot read property '_meta' of undefined"
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- Chart.js 2.2.x - How to access the pixel coordinate of a point in my dataset
- return percentage in chart.js (v2+) legend
- ChartJS dynamic label
- Using Chart.js client-side in Atlasboard
- How to dynamically use chartjs-plugin-annotation with ng2-charts?
- Apply/Register conflicting plugins to different charts
- Chart.js - Getting data from database using mysql and php
- How to set lower limit for the highest value being displayed on Y Axis?
- Stack grouped xAxes in bar chart
- Multiple labels for multiple data-sets in chart.js
- Chart.js radar chart ticks are hidden behind the graph
- Set minimum step size in chart js
- How to read and plot json with Chart.js
- Chart.js - How to show loading animation before plotting chart
- chart js chart bar chart not showing data from 0
- chart js onclick function call
- Cannot find module /chartjs.helpers while using chartjs-plugins-datalabels (ReactJS)
- Different color for each bar in a bar chart; ChartJS
- Chart.js Tooltips customization
- display vertical axis label in line chart using chart.js
- ChartJS Datalabels plugin and negative numbers
- automatic Y-axis scale: max is always as 120% of highest value in ChartJS
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- How to sum the array value in javascript like chartjs data array and input value sum
- ChartJS - Adding legend title into tooltip title
- flask altering python list
- Angular charts is not displayed