Search code examples
javascriptchartsdygraphs

Avoid float number labels on y-axis with dygraphs javascript and set different grid lines to secondary y axis

I have series with simple integer values. So there is no need to have float numbers as y-axis labels.

I use the axisLabelFormatter to convert y to integers. But the result is, that I have duplicated integer values on the y-axis.

How can I get a y-axis, which is labeled only with single integers at the correct place?

I would like to have the secondary y-axis with a different grid too

See also the example at https://jsfiddle.net/eM2Mg/9559/.

Solution

  • I have tried your example, modified it and I have got this result

    enter image description here

    I have modified your code the next way

    var graph2 = new Dygraph(document.getElementById("graph2"), data, {
   axes: {
      y2: {
        axisLabelFormatter: function(y) {
           return texts[y] || parseInt(y);
        },
      drawGrid: true,
      independentTicks: true,
      pixelsPerLabel: 100,
      gridLinePattern: [2,2]
    }
  },
  legend: "always",
  series: {
    "State": {
        axis: "y2",
        strokeWidth: 2,
        stepPlot: true,
    }
  },
  strokeWidth: 2,
  title: "my try to get what I want"
});

    I have set the option drawGrid and independentLabels to true.

    It is necessary to adjust the pixelsPerLabel to the size you think the 3 values auto, on, off are better shown. And the grid patterLine to show a different grid for the right y axis.

    You can also remove the drawGrid if you consider it look better without the grid.

    I hope this could be a solution for you! Regards!