ankane / chartkick

Create beautiful JavaScript charts with one line of Ruby
https://chartkick.com
MIT License
6.33k stars 565 forks source link

Chart annotations not rendered after `updateData()` #548

Closed jonheslop closed 4 years ago

jonheslop commented 4 years ago

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 4 years ago

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 🤦