ankane/chartkick

Chart annotations not rendered after `updateData()`

jonheslop opened this issue · 1 comments

jonheslop commented

I can render a line chart with data and an annotation with this

    annotation: {
      annotations: [{
        type: "line",
        mode: "horizontal",
        scaleID: "y-axis-0",
        value: @limit,
        borderColor: "#ff4080",
        label: {
          enabled: true,
          content: "Plan limit",
          backgroundColor: "transparent",
          fontColor: "#ff4080",
          yAdjust: 12,
          xPadding: 0,
          yPadding: 0,
          fontFamily: "'Maison Neue', -apple-system, BlinkMacSystemFont, -system-ui, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif",
          fontSize: 12
        }
      }]
    }
  } %>

But when I update the chart with updateData(data) the annotation disappears (the data does update correctly)

But if in the console I run Chartkick.charts['connections'].getOptions() I can still see the old annotation.

I even tried this is my JS

        chart.updateData(seriesForChart);
        const initialOps = chart.getOptions();
        const newOps = {
          library: {
            annotation: {
              annotations: [
                {
                  type: "line",
                  mode: "horizontal",
                  scaleID: "y-axis-0",
                  value: 20,
                  borderColor: "#ff4080",
                  label: {
                    enabled: true,
                    content: "New plan limit",
                    backgroundColor: "transparent",
                    fontColor: "#ff4080",
                    yAdjust: 12,
                    xPadding: 0,
                    yPadding: 0,
                    fontFamily:
                      "'Maison Neue', -apple-system, BlinkMacSystemFont, -system-ui, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif",
                    fontSize: 12,
                  },
                },
              ],
            },
          },
        };
        chart.setOptions(Object.assign({}, initialOps, newOps));

This still doesn’t show the annotation but again when I put Chartkick.charts['connections'].getOptions() into the console it shows the updated annotation.

Does anyone have any ideas?

jonheslop commented

Ok I got to the bottom of this, when it redraws the chart it updates the scale to fit the new data and that means it can cut off the annotation if it’s beyond the new scale.

So basically there is no bug, 🙈

Sorry for spam 🤦

  • 👍1