Callback to alter style formatting of scaleLabels and gridLines?

[engelby]

Good Morning.

I am making a simple line chart to show trends. Is there a way to use a function to alter the style of the gridlines such that the center gridline is more pronounced than the others? The provided link is an example chart that I have hard coded that gets very close to the effect I would like to achieve.

This code is a basis for having multiple charts on the same page. Each chart would have different linear scaling that I would ensure would have a proper center line and have the same numerical range above and below. Going forward with that logic, I could enforce the number of gridlines to be the same number for each chart and use the existing gridLine color and lineWidth settings.

I am pretty sure I can make the necessary functions to do what I want, but I was just wondering if there is something within the library that would make this easier? Perhaps changing where the zeroLine is? Instead of it always being the 0th element, maybe it could be an index into the scale array?

In addition, is there a way to change the fontStyle of the scaleLabel for the zeroLine to 'normal' (0.60 in the example)?

Trending Chart

Thanks for reading and your consideration.

-Mike

[etimberg]

There isn't currently a way to achieve what you want. You're likely stuck with modifying the draw functions.

[engelby]

I altered the distributed chart.js source file. I added the zeroLineIndex variable in src/core/core.scale.js with a default of -1, then modified the assignment statement in src/scales/scale.linearbase.js.

It's pretty ugly now and could be done a lot better. This weekend I'll make the proper source changes and generate a patch file so I can apply it to future revisions.

--- C:\Business\Dev\node_modules\chart.js\dist\Chart.js 2016-10-07 13:04:30.000000000 -0500
+++ C:\ColdFusion9\wwwroot\********\js\Chart.js 2016-10-18 13:09:51.000000000 -0500
@@ -6900,12 +6900,13 @@
            color: 'rgba(0, 0, 0, 0.1)',
            lineWidth: 1,
            drawBorder: true,
            drawOnChartArea: true,
            drawTicks: true,
            tickMarkLength: 10,
+            zeroLineIndex: -1,
            zeroLineWidth: 1,
            zeroLineColor: 'rgba(0,0,0,0.25)',
            offsetGridLines: false,
            borderDash: [],
            borderDashOffset: 0.0
        },
@@ -9475,13 +9476,13 @@
                me.end = me.max;
            }
        },
        convertTicksToLabels: function() {
            var me = this;
            me.ticksAsNumbers = me.ticks.slice();
-           me.zeroLineIndex = me.ticks.indexOf(0);
+            me.zeroLineIndex = (me.options.gridLines.zeroLineIndex != -1) ? me.options.gridLines.zeroLineIndex : me.ticks.indexOf(0);

            Chart.Scale.prototype.convertTicksToLabels.call(me);
        }
    });
 };

[etimberg]

V3 (in dev in the master branch) now supports this as of #6700. A function can be specified to return the grid line styling (colour & width)