Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to have line span from 2 points in chartjs?

I currently have a chart with a dynamic line and a horizontally static line:
chartjs img
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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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
                }

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search