search

apexcharts / react-apexcharts

📊 React Component for ApexCharts
https://apexcharts.com
MIT License
1.29k stars 149 forks source link

Angular Sync Charts not working #401

Open vicatcu opened 2 years ago

vicatcu commented 2 years ago

Is all that's needed for sync charts to work, as stated in the demo here: https://apexcharts.com/docs/chart-types/synchronized-charts/

I generate uuid's to assign to options.chart.id, I use a fixed string for options.chart.group, and I set options.yaxis.labels.minWidth to 40, just like the example in the docs. I generate the options hash from scratch using a function, and I only set the chart.id the first time I pass it to an apx-chart instance via chart.updateOptions(options, true, true, true).

When I use the Selection Zoom tool only the one chart that I'm doing that on changes, the others don't change at all. What might I be missing that's causing this to not work? Could it be because I'm using chart.updateOptions() related to https://github.com/apexcharts/apexcharts.js/issues/623? I think probably not, it seems to still not work when I switch to using ApexCharts.exec(id, 'updateOptions', options);.

vicatcu commented 2 years ago

Here is a representative chart options hash (that I am constructing):

{
  "annotations": {
    "yaxis": [
      {
        "y": 51.175,
        "label": {
          "offsetY": -20,
          "offsetX": -12,
          "text": "°F",
          "position": "left",
          "borderWidth": 2,
          "style": {
            "fontWeight": 600,
            "fontSize": "16px"
          }
        }
      }
    ]
  },
  "colors": [
    "rgb(214, 39, 40)",
    "rgb(31, 119, 180)",
    "rgb(44, 160, 44)",
    "rgb(255, 127, 14)",
    "rgb(148, 103, 189)"
  ],
  "xaxis": {
    "type": "datetime",
    "labels": {
      "datetimeUTC": false,
      "format": "hh:mm TT",
      "rotate": 0,
      "rotateAlways": false,
      "style": {
        "fontSize": "16px",
        "fontWeight": 600
      }
    },
    "crosshairs": {
      "show": false,
      "width": 1,
      "position": "back",
      "opacity": 0.9,
      "stroke": {
        "color": "#989898",
        "width": 1,
        "dashArray": 5
      }
    }
  },
  "yaxis": {
    "min": 22.825,
    "max": 51.175,
    "tickAmount": 10,
    "crosshairs": {
      "show": false,
      "width": 1,
      "position": "back",
      "opacity": 0.9,
      "stroke": {
        "color": "#989898",
        "width": 1,
        "dashArray": 5
      }
    },
    "tooltip": {
      "enabled": true,
      "offsetX": 99999
    },
    "labels": {
      "minWidth": 40,
      "style": {
        "fontSize": "16px",
        "fontWeight": 600
      }
    }
  },
  "title": {
    "text": "A day ago",
    "align": "center",
    "margin": 0,
    "offsetX": 0,
    "offsetY": 0,
    "floating": false,
    "style": {
      "fontSize": "14px",
      "fontWeight": "bold",
      "color": "#989898"
    }
  },
  "chart": {
    "id": "21285c09-037d-4b87-a13a-f8171c3f22d6",
    "group": "data-group",
    "foreColor": "#989898",
    "type": "line",
    "background": "#ffffff",
    "stacked": false,
    "height": 400,
    "zoom": {
      "type": "x",
      "enabled": true,
      "autoScaleYaxis": true
    },
    "toolbar": {
      "autoSelected": "zoom",
      "export": {
        "csv": {
          "headerCategory": "timestamp",
          "filename": "data"
        },
        "png": {
          "filename": "chart"
        },
        "svg": {
          "filename": "chart"
        }
      }
    }
  },
  "noData": {
    "text": "Loading Data..."
  },
  "grid": {
    "xaxis": {
      "lines": {
        "show": true
      }
    },
    "yaxis": {
      "lines": {
        "show": true
      }
    }
  },
  "stroke": {
    "show": true,
    "width": 4,
    "curve": [
      "stepline",
      "stepline",
      "straight"
    ]
  },
  "markers": {
    "size": [
      0,
      0,
      2
    ],
    "strokeColors": [
      "rgb(214, 39, 40)",
      "rgb(31, 119, 180)",
      "rgb(44, 160, 44)",
      "rgb(255, 127, 14)",
      "rgb(148, 103, 189)"
    ]
  },
  "dataLabels": {
    "enabled": false
  },
  "tooltip": {
    "x": {
      "format": "dd MMM @ hh:mm:ss TT"
    },
    "y": {
      "title": {}
    }
  },
  "legend": {
    "show": false
  }
}

Here is a representative chart options hash (after apx-charts modifies it I guess):

                {
  "annotations": {
    "yaxis": [
      {
        "y": 100,
        "y2": null,
        "strokeDashArray": 1,
        "fillColor": "#c2c2c2",
        "borderColor": "#c2c2c2",
        "borderWidth": 1,
        "opacity": 0.3,
        "offsetX": 0,
        "offsetY": 0,
        "width": "100%",
        "yAxisIndex": 0,
        "label": {
          "borderColor": "#c2c2c2",
          "borderWidth": 2,
          "borderRadius": 2,
          "text": "",
          "textAnchor": "end",
          "position": "left",
          "offsetX": -12,
          "offsetY": -20,
          "style": {
            "background": "#fff",
            "fontSize": "16px",
            "fontWeight": 600,
            "cssClass": "",
            "padding": {
              "left": 5,
              "right": 5,
              "top": 2,
              "bottom": 2
            }
          }
        }
      }
    ]
  },
  "colors": [
    "rgb(214, 39, 40)",
    "rgb(31, 119, 180)",
    "rgb(44, 160, 44)",
    "rgb(255, 127, 14)",
    "rgb(148, 103, 189)"
  ],
  "xaxis": {
    "type": "datetime",
    "labels": {
      "datetimeUTC": false,
      "format": "hh:mm TT",
      "rotate": 0,
      "rotateAlways": false,
      "style": {
        "fontSize": "16px",
        "fontWeight": 600
      }
    },
    "crosshairs": {
      "show": false,
      "width": 1,
      "position": "back",
      "opacity": 0.9,
      "stroke": {
        "color": "#989898",
        "width": 1,
        "dashArray": 5
      }
    }
  },
  "yaxis": [
    {
      "show": true,
      "showAlways": false,
      "showForNullSeries": true,
      "opposite": false,
      "reversed": false,
      "logarithmic": false,
      "logBase": 10,
      "tickAmount": 10,
      "forceNiceScale": false,
      "max": 100,
      "min": 0,
      "floating": false,
      "labels": {
        "show": true,
        "minWidth": 40,
        "maxWidth": 160,
        "offsetX": 0,
        "offsetY": 0,
        "rotate": 0,
        "padding": 20,
        "style": {
          "colors": [
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
          ],
          "fontSize": "16px",
          "fontWeight": 600,
          "cssClass": ""
        }
      },
      "axisBorder": {
        "show": false,
        "color": "#e0e0e0",
        "width": 1,
        "offsetX": 0,
        "offsetY": 0
      },
      "axisTicks": {
        "show": false,
        "color": "#e0e0e0",
        "width": 6,
        "offsetX": 0,
        "offsetY": 0
      },
      "title": {
        "rotate": -90,
        "offsetY": 0,
        "offsetX": 0,
        "style": {
          "fontSize": "11px",
          "fontWeight": 900,
          "cssClass": ""
        }
      },
      "tooltip": {
        "enabled": true,
        "offsetX": 99999
      },
      "crosshairs": {
        "show": false,
        "position": "back",
        "stroke": {
          "color": "#989898",
          "width": 1,
          "dashArray": 5
        },
        "width": 1,
        "opacity": 0.9
      }
    }
  ],
  "title": {
    "text": "A day ago",
    "align": "center",
    "margin": 0,
    "offsetX": 0,
    "offsetY": 0,
    "floating": false,
    "style": {
      "fontSize": "14px",
      "fontWeight": "bold",
      "color": "#989898"
    }
  },
  "chart": {
    "id": "d49af80b-e922-474e-bff2-9ee063772a9f",
    "group": "data-group",
    "foreColor": "#989898",
    "type": "line",
    "background": "#ffffff",
    "stacked": false,
    "height": 400,
    "zoom": {
      "type": "x",
      "enabled": true,
      "autoScaleYaxis": true
    },
    "toolbar": {
      "autoSelected": "zoom",
      "export": {
        "csv": {
          "headerCategory": "timestamp",
          "filename": "data"
        },
        "png": {
          "filename": "chart"
        },
        "svg": {
          "filename": "chart"
        }
      }
    }
  },
  "noData": {
    "text": "No Data Available..."
  },
  "grid": {
    "xaxis": {
      "lines": {
        "show": true
      }
    },
    "yaxis": {
      "lines": {
        "show": true
      }
    }
  },
  "stroke": {
    "show": true,
    "width": 4,
    "curve": [
      "stepline",
      "stepline",
      "straight"
    ]
  },
  "markers": {
    "size": [
      0,
      0,
      2
    ],
    "strokeColors": [
      "rgb(214, 39, 40)",
      "rgb(31, 119, 180)",
      "rgb(44, 160, 44)",
      "rgb(255, 127, 14)",
      "rgb(148, 103, 189)"
    ]
  },
  "dataLabels": {
    "enabled": false
  },
  "tooltip": {
    "x": {
      "format": "dd MMM @ hh:mm:ss TT"
    },
    "y": {
      "title": {}
    }
  },
  "legend": {
    "show": false
  }
}