I currently have a chart with a dynamic line and a horizontally static line:
Right now, the code manually types out the horizontal data points 50 times:
var data1 = {
datasets: [
{
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
data: [0.94, 0.25, 0.57, 1.01, 0.62, 1.28, 1.65, 0.01, 3.01, 0.94, 1.26, 0.6, 0.32, 0.69, 1.77, 1.03, 0.89, 0.79, 0.63, 1.16, 0.52, 2.08, 1.17, 1.05, 0.77, 0.88, 0.64, 0.83, 0.13, 0.44, 0.71, 0.39, 1.12, 1.57, 0.35, 0.95, 0.92, 1.55, 1.64, 1.46, 1.72, 0.67, 1.46, 0.74, 1.1, 2.07, 1.36, 1.04, 0.16, 1.21, 1.15],
fill: 'start',
label: 'National'
},
{
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgba(153, 102, 255, 1)',
data: [1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01],
fill: 'start',
label: 'NJIT',
spanGaps: true
}
],
labels: ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY']
};
Is there a way to specify horizontal lines OR specify a start (1.01) and finish (1.01) and have it connect it in between? I tried span gaps but it didn’t work.
0
Answered by LeeLenaLeee on GitHub, you can use Chart.js object notation: https://www.chartjs.org/docs/master/general/data-structures.html#object
Something like:
{
backgroundColor: 'rgba(153, 102, 255, 0.2)',
borderColor: 'rgba(153, 102, 255, 1)',
data: [{x: 'AL', y: 1.01}, {x: 'WY', y: 1.01}],
fill: 'start',
label: 'NJIT',
spanGaps: true
}
Besides using a function like Array.prototype.fill or Array.from as a convenience to avoid repeating the constant values:
data: Array(51).fill(1.01)
or
data: Array.from({length: 51}, ()=>1.01)
(which has the benefit or inconvenience of keeping all the intermediate values visible, including for the tooltip) — there are at least two ways to draw the line form the first to last point, which will be the only ones that will appear on the map.
The first one, already approached in the posted code, using spanGaps: true, but this will require to fill all the 49 intermediate positions with nulls:
data:[1.01, ...Array(49).fill(null), 1.01],
Example in jsFiddle
The other, can just specify the two points with x and y coordinates,
as described in the documentation:
data:[{x: 'AL', y: 1.01}, {x: 'WY', y: 1.01}],
which doesn’t require spanGaps:true
Example in jsFiddle
1