Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

First gridline does not respect custom color

See original GitHub issue

First gridline does not respect the color I set in ChartOptions.

chartjs

Gridline-related extract from ChartOptions:

{
      responsive: true,
      maintainAspectRatio: false,
      layout: { padding: { top: 10, bottom: 10 } },
      legend: { display: false },
      scales: {
        xAxes: [
          {
            display: true,
            type: 'time',
            time: {
              unit: this.shortPeriod ? 'day' : 'week',
              displayFormats: {
                day: 'ddd',
                week: '[W] W'
              },
              isoWeekday: true,
              display: false,
              tooltipFormat: 'dddd DD. MMM'
            },
            ticks: {
              min: this.startDate.toJSDate(),
              max: this.endDate.toJSDate(),
              labelOffset: this.shortPeriod ? 15 : 20,
              fontColor: 'rgba(255, 255, 255, 0.5)'
            },
            scaleLabel: {
              display: false
            },
            gridLines: {
              display: true,
              color: 'red'
            }
          }
        ],
        yAxes: [
          {
            id: 'LOAD',
            scaleLabel: {
              display: false
            },
            position: 'left',
            ticks: {
              min: 0,
              max: 2500,
              display: false
            },
            gridLines: {
              display: false
            }
          },
          {
            id: 'REST',
            scaleLabel: {
              display: false
            },
            position: 'right',
            ticks: {
              // add a bit of top/bottom padding for min/max values
              min: 0.8,
              max: 5.2,
              display: false
            },
            gridLines: {
              display: false
            }
          },
            gridLines: {
              display: true,
              tickMarkLength: 0,
              lineWidth: 1,
              borderDash: [5],
              color: ['transparent', 'rgba(255, 255, 255, 0.5)'],
              z: 10
            }
          }
        ]
      },

Issue Analytics

State:
Created 4 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

alexeigscommented, Jan 25, 2020

@etimberg That works, many thanks!

gridLines: {
    color: 'white',
    zeroLineColor: 'white'
}

0reactions

benmccanncommented, Jan 25, 2020

No, I’ve never really used Typescript. Might be a cool v3 feature to migrate the library to it or put the types in the main repo 😉 But it’s not something I’d have time to spend time on