grid styles

dist/types.d.ts

@@ -99,6 +99,9 @@ export declare type Options = {
     renderLegend?: boolean;
 };
 export declare type GridOptions = {
+    color?: string;
+    opacity?: number;
+    strokeWidth?: number;
     x?: {
         enabled?: boolean;
         ticksCount?: number;

src/components/grid.ts

@@ -8,6 +8,9 @@ import defaultsDeep from 'lodash/defaultsDeep';
 
 const DEFAULT_GRID_TICK_COUNT = 5;
 const DEFAULT_GRID_OPTIONS: GridOptions = {
+  color: 'lightgray',
+  opacity: 0.7,
+  strokeWidth: 0.5,
   x: {
     enabled: true,
     ticksCount: DEFAULT_GRID_TICK_COUNT,
@@ -85,9 +88,12 @@ export class Grid {
 
   updateStylesOfTicks(): void {
     // TODO: add options for these actions
-    this._svgEl.selectAll('.grid').selectAll('.tick')
+    this._svgEl.selectAll('.grid').selectAll('.tick').select('line')
-      .attr('opacity', '0.5');
+      .attr('stroke', this.gridOptions.color)
+      .attr('stroke-opacity', this.gridOptions.opacity)
+      .style('stroke-width', this.gridOptions.strokeWidth + 'px');
     this._svgEl.selectAll('.grid').select('.domain')
-      .style('pointer-events', 'none');
+      .style('pointer-events', 'none')
+      .style('stroke-width', 0);
   }
 }

src/css/style.css

@@ -1,9 +0,0 @@
-.grid path {
-  stroke-width: 0;
-}
-
-.grid line {
-  stroke: lightgrey;
-  stroke-opacity: 0.7;
-  shape-rendering: crispEdges;
-}

src/index.ts

@@ -2,8 +2,6 @@ import VueChartwerkPodMixin from './VueChartwerkPodMixin';
 import { PodState } from './state';
 import { Grid } from './components/grid';
 
-import styles from './css/style.css';
-
 import {
   Margin,
   TimeSerie,
@@ -149,9 +147,6 @@ abstract class ChartwerkPod<T extends TimeSerie, O extends Options> {
     _series: T[] = [],
     _options: O
   ) {
-    // TODO: test if it's necessary
-    styles.use();
-
     let options = cloneDeep(_options);
     defaultsDeep(options, DEFAULT_OPTIONS);
     this.options = options;

src/types.ts

@@ -91,6 +91,9 @@ export type Options = {
   renderLegend?: boolean;
 };
 export type GridOptions = {
+  color?: string,
+  opacity?: number,
+  strokeWidth?: number,
   x?: {
     enabled?: boolean;
     ticksCount?: number;