score:4
Accepted answer
the plugin core api offers a range of hooks that may be used for performing custom code. you can use the beforedraw
hook to draw lines of different style between different datapoints using text directly on the canvas using canvasrenderingcontext2d
.
in case the last data point shall be of different color as well, you can define dataset.bordercolor
as an array. it should contain an entry for each value, all being identical except the last one. this can be done with array.map()
as follows.
bordercolor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),
please have a look at the runnable code snippet below.
const data_array = [307.65, 309.54, 307.71, 314.96, 313.14, 319.23, 316.85, 318.89, 316.73, 318.11, 319.55];
var mychart = new chart('mychart', {
type: 'line',
plugins: [{
beforedraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
data_array.foreach((value, index) => {
if (index > 0) {
var valuefrom = data_array[index - 1];
var xfrom = xaxis.getpixelfortick(index - 1);
var yfrom = yaxis.getpixelforvalue(valuefrom);
var xto = xaxis.getpixelfortick(index);
var yto = yaxis.getpixelforvalue(value);
ctx.linewidth = 5;
if (index + 1 == data_array.length) {
ctx.setlinedash([5, 5]);
ctx.strokestyle = 'rgb(0, 0, 255)';
} else {
ctx.strokestyle = 'rgb(255, 99, 132)';
}
ctx.beginpath();
ctx.moveto(xfrom, yfrom);
ctx.lineto(xto, yto);
ctx.stroke();
}
});
ctx.restore();
}
}],
data: {
labels: ['2020/05/13', '2020/05/14', '2020/05/15', '2020/05/18', '2020/05/19', '2020/05/20', '2020/05/21', '2020/05/22', '2020/05/26', '2020/05/27', '2020/05/29'],
datasets: [{
label: 'count',
data: data_array,
tension: 0,
showline: false,
bordercolor: data_array.map((v, i) => i + 1 == data_array.length ? 'rgb(0, 0, 255)' : 'rgba(255, 99, 132)'),
borderwidth: 5
}]
},
options: {
animation: {
duration: 0
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart" height="100"></canvas>
Source: stackoverflow.com
Related Query
- How to display certain part of chart.js as dotted while rest as bold?
- How to display Json object in chart js consisting of lists created using Django rest framework in angular application
- how to not repeat code while creating multiple charts in chart js
- How to display Line Chart dataset point labels with Chart.js?
- How to display value of only one datapoint in line chart
- How to display inline values in a stacked bar chart with Chart.js?
- How to display data labels outside in pie chart with lines in ionic
- How to display the labels in doughnut chart using ng2 charts?
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- how to customize tool tip while mouse go over bars on Chart js bar chart
- ChartJS : How to display two "y axis" scales on a chart
- how to display chart data as html table chartjs
- How to display chart using Chartjs with JSON data in Laravel
- How to underline and bold tooltip chart js
- How do I get a chart.js chart to display data in a Node/React web application?
- how to display multiple sum with chart js and laravel?
- How do I display a chart with chart.js?
- How do I display chart on my HTML page based on JSON data sent by Node JS
- Chart JS how to display an array of data objects as bar chart
- How to display date instead of year in morris line chart in js
- How to get Data from API to display chart using chartjs in Vuejs
- how to display name on multi series pie chart in chartjs
- How can i display my data in a chart using chart js
- How do I display two datasets on a single chart with chartjs
- Chart.js How to sum the values in a pie chart and display them in the header
- How to make 2 bar in a certain section of chart
- How to display Labels on Doughnut chart in Chart.js
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
More Query from same tag
- Dashboard grid - Chart.JS and CSS- issue widening two small horizontal bar graphs - noob question
- Charts.js - How to set custom tooltip text for each dataset
- Changing data when click button in chart.js
- Angular Charts.js: Can't refresh chart with data
- Chart.js Chart does not start at
- Chart.js - Multiple JSON data object array [{x: Date, y: count}....] representing each dataset of the chart
- Generate bar chart using chart.js and associative array
- Is there a way to apply css on chart.js V3.7.0 tooltip without it being custom or external?
- ng2-charts: How to set Title of chart dynamically in typescript
- Vertical align bar chart from chart.js not working
- Change the color of displayed values in pie chart
- Change data onclick with ChartJS
- Display Date Label in axes - chart js/ng2 charts
- Chart JS - Line chart with days in x-axis
- using chart-dataset-override option in angular-chart.js
- Chartjs numbers on bar chart flash on hover
- Chart.js line chart looking as area chart with smooth lines but not sharp
- Chart.js - how to make proportional intervals on X axis on line chart
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Issues getting JSON string for chart.js data
- Add new chart.js when clicking a button, but get 'Cannot read property 'getContext' of null'
- Chart.js add direction arrows to the X and Y axes
- hereChartJS Line Chart with Time Axis
- How to hide y axis line in ChartJs?
- How to order bubbles according their size and not by the order of their datasets?
- Changing borderDash for specific gridLines in radar chart
- How to get value of defaultdic in JS (Django framework)?
- how I can get label name when user click on particular area in doughnut chart.js? I am not able to find the index of selected area for chart.js
- chartJS doesn't show graphs on iphone/ipad
- Chart JS version 3 not showing in pdf for engine wkhtmltopdf