score:4
drawing a dotted line
you don't need to extend the chart, but it would be cleaner to do it that way.
preview
script
chart.types.line.extend({
name: "linealt",
initialize: function () {
chart.types.line.prototype.initialize.apply(this, arguments);
var ctx = this.chart.ctx;
var originalbeziercurveto = ctx.beziercurveto;
ctx.beziercurveto = function () {
ctx.setlinedash([10, 10]);
originalbeziercurveto.apply(this, arguments)
}
}
});
...
new chart(ctx).linealt(chartdata);
fiddle - https://jsfiddle.net/ahj6u14e/
note - the alternative would be to just override beziercurveto
using the chart object.
this works because beziercurveto
is only used to draw the line. if you wanted to do this for straight lines it wouldn't work because lineto
is used for other stuff (axis, grid lines...)
chart.js 2.0 had a borderdash
option when i last checked (see https://stackoverflow.com/a/31428640/360067)
score:6
for dotted lines use borderdash
and bordercapstyle
. the following example creates a dotted line (3px diameter):
data: {
datasets: [
{
data : data,
borderwidth : 3, // set diameter of dots here
bordercolor : '#ccc',
fill : false,
pointradius : 0,
borderdash : [0,6], // set 'length' of dash/dots to zero and
// space between dots (center to center)
// recommendation: 2x the borderwidth
bordercapstyle : 'round' // this is where the magic happens
}
]
}
output
score:7
in chart.js 2.1+
, use the borderdash
option within your dataset. it takes an array of two numbers. see this codepen
Source: stackoverflow.com
Related Query
- How can I draw dotted line using chartjs?
- How to draw Horizontal line on Bar Chart Chartjs
- Can we draw a Line Chart with both solid and dotted line in it?
- how to draw line graph with line animation from left to right using chartjs?
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- How to draw multiple line on y axis for same x axis in chartjs v2?
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- How to draw a range label on x axis using chartJS
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Chartjs 3 how to draw a horizontal line starting at a specific yAxis value
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- How can I shade a portion of a ChartJS line grph=
- How to Draw a line on chart without a plot point using chart.js
- How can I draw a line to the highest datapoint in chart js?
- how to draw dotted line vertical line at 0 postiion in highChart
- Chartjs - how to make line position to vertical center and how to display dotted sharp in the backround?
- how to draw Line chart using chart.js and datalabels should be shown
- Draw stacked horizontal bar chart with Average line using ChartJS
- How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?
- How Can I Get An Instance of a ChartJS Bar Chart Using Angular
- How to run Chart.js samples using source code
- How do I draw horizontal bars with a label using either ChartJS or D3?
- Chart.js: How can I set paddings and draw a background box in a line chart?
- How to add vertical line in bar chart using chartJs and ng2-charts?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Dotted Line in ChartJS
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to add an on click event to my Line chart using Chart.js
- Display line chart with connected dots using chartJS
- How to Draw Gantt chart using chart js or other libraries
More Query from same tag
- how to resize specific gridline(s) in chart.js
- Export Canvas Charts to png and pdf
- How to sort color segments by value within the 100% stacked bars rather than by value across all the stacked bars in Highcharts or ChartJs
- Prevent label of another data from being toggled whenever a label from one data is toggled
- How call a function when my array is filled
- Chart.js: Thousand Separator and Tittle ind the Middle of the Doughnut
- How can i loop some specific key in each index json data and put it in dataset: data ? (chart.js)
- generating a Chart.js chart with python data
- how to draw Line chart using chart.js and datalabels should be shown
- chart.js pie chart issue with display: none
- Gantt Chart Timeline Chart js 3
- Chart JS distance between bar stacked
- How to call back one js file from another js file?
- Remove 0's (zeros) from x-axis of bar chart in Chart.js
- ChartJS: Horizontal Bar with multiple datasets not showing Bars
- Laravel Vue error when trying to use chart.js with Laravel-charts package
- How to use excess vertical space in stacked bar chart?
- With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)
- Fit all content inside a HTML page designed using bootstrap in the viewable area without need to scroll
- How do I customize y-axis labels on a Chart.js line chart?
- Angular Chartjs error TS2304: Cannot find name OffscreenCanvasRenderingContext2D
- Chart.js annotation horizontal line on double y-axis graph
- ChartJS add tooltip to a grouped bar chart
- how to populate data in chart.js
- Link in ChartJS tooltip not clickable
- How to export chart.js graph to svg in vue?
- Change Chartjs Legend Icon Style
- How to draw the X-axis (line at Y = 0) in Chart.js?
- Using Chart.js version 3, How to left justify the y-axis labels on a stacked bar chart?
- Chartjs linechart with only one point - how to center