{"id":25118975,"url":"https://github.com/stax3/live_charts","last_synced_at":"2025-04-22T18:47:40.130Z","repository":{"id":267529572,"uuid":"901553679","full_name":"Stax3/live_charts","owner":"Stax3","description":"Render real-time, dynamic charts in LiveView applications","archived":false,"fork":false,"pushed_at":"2025-01-31T13:17:53.000Z","size":1011,"stargazers_count":22,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T17:41:35.258Z","etag":null,"topics":["apexcharts","charting-library","elixir","liveview","phoenix"],"latest_commit_sha":null,"homepage":"https://livecharts.stax3.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Stax3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-10T21:53:30.000Z","updated_at":"2025-03-21T23:48:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"75901e8d-06ac-48b5-ba8f-883f8e71d7b0","html_url":"https://github.com/Stax3/live_charts","commit_stats":null,"previous_names":["sruplex/live_charts","stax3/live_charts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stax3%2Flive_charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stax3%2Flive_charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stax3%2Flive_charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stax3%2Flive_charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Stax3","download_url":"https://codeload.github.com/Stax3/live_charts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250301480,"owners_count":21408184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apexcharts","charting-library","elixir","liveview","phoenix"],"created_at":"2025-02-08T04:23:36.206Z","updated_at":"2025-04-22T18:47:40.097Z","avatar_url":"https://github.com/Stax3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"LiveCharts\n==========\n\n\u003e LiveCharts allows you to render static and dynamic charts in Phoenix LiveView applications.\n\nLiveCharts currently comes with support for [ApexCharts][apexcharts] out of the box, but it\ncan work with any JS charting library that has a [`LiveCharts.Adapter`][docs-adapter] defined.\n\nTo see live demos, visit: [livecharts.stax3.com][demos].\n\n\n\n## Installation\n\nAdd `:live_charts` to your `mix.exs` dependencies:\n\n```elixir\ndefp deps do\n  [\n    {:live_charts, \"~\u003e 0.3.0\"},\n  ]\nend\n```\n\nThen include the LiveCharts hooks in your `app.js`:\n\n```javascript\n// Import the JS file\nimport LiveCharts from \"live_charts\"\n\n// Include the hooks\nlet liveSocket = new LiveSocket(\"/live\", Socket, {\n  params: {_csrf_token: csrfToken},\n  hooks: {\n    // your other hooks...\n    // e.g. SomeCustomHook,\n\n    // Expand LiveCharts hooks at the end\n    ...LiveCharts.Hooks,\n  },\n});\n```\n\n\n\n## Configuration\n\nLiveCharts may optionally be configured to set the default adapter or JSON encoding library.\nIt currently defaults to the following:\n\n```elixir\n# config/config.exs\n\nconfig :live_charts,\n  adapter: LiveCharts.Adapter.ApexCharts,\n  json_library: Jason\n```\n\n\n\n## Usage\n\n### Chart data\n\nLiveCharts tracks a chart's data and configuration in a [`%Chart{}`][docs-chart] struct.\nBefore it can be rendered, you need to build this struct.\n\n```elixir\nmy_chart =\n  LiveCharts.build(%{\n    # (Optional) a unique string id to differentiate the chart from other\n    # charts on the same page. If not set, a random id will be assigned\n    # to the chart.\n    id: \"my-custom-chart-id\",\n\n    # Set the chart type. Supports `:line`, `:bar`, `:pie`, `:donut`,\n    # `:area`, and many more. For a full list of supported types, see the\n    # adapter or JS library documentation.\n    type: :bar,\n\n    # A list of series data with all the datapoints to chart. Format of\n    # this data is determined by the adapter/JS library. This may also\n    # be empty, if you plan to push dynamic updates to the chart over\n    # the socket later.\n    series: [\n      %{name: \"Sales\", data: [10, 20, 30, 40, 50]},\n    ],\n\n    # (Optional) Other library and adapter-specific options.\n    options: %{\n      xaxis: %{\n        categories: [2021, 2022, 2023, 2024, 2025]\n      },\n    },\n\n    # (Optional) set the adapter to use for the chart. If not set, uses\n    # the global adapter configured in `config.exs` (defaults to\n    # `LiveCharts.Adapter.ApexCharts`).\n    adapter: LiveCharts.Adapter.ApexCharts,\n  })\n```\n\nFor a full list of options, see the official [ApexCharts docs][apexcharts-docs] and\nthe [`LiveCharts.Adapter.ApexCharts`][docs-apex] adapter information on HexDocs.\nYou can also [view live demos][demos] here.\n\n\n### Render Static Charts\n\nWith a `LiveCharts.Chart` struct defined, you can now `assign` it in your liveview:\n\n```elixir\ndef mount(_params, _session, socket) do\n  socket =\n    socket\n    |\u003e assign(:page_title, \"Page with charts!\")\n    |\u003e assign(:my_chart, my_chart)\n\n  {:ok, socket}\nend\n```\n\nTo then render the chart in a heex template, use `LiveCharts.chart/1` component:\n\n```elixir\n\u003cLiveCharts.chart chart={@my_chart} /\u003e\n```\n\nThis will re-render the chart on the page any time the `chart` assign is changed or updated.\n\n\n### Push Realtime/Dynamic updates to the Chart\n\nIf the chart needs to be updated often, a better strategy is to only push the new data instead\nof rebuilding the entire chart and re-rendering it. You can do so by calling:\n\n```elixir\nLiveCharts.push_update(socket, chart.id, updated_series)\n```\n\n## Example\n\nLet's say we want to render a line chart that starts out empty, but as we get datapoints from\nan external source, we want to push them to the users' browsers.\n\nWe'll start by assigning a line chart to the LiveView:\n\n```elixir\n@impl true\ndef mount(_params, _session, socket) do\n  # Build an empty chart with custom settings\n  chart = LiveCharts.build(%{\n    type: :line,\n    series: [],\n    options: %{\n      xaxis: %{type: \"datetime\"},\n      yaxis: %{min: 0, max: 100},\n      chart: %{\n        animations: %{enabled: true, easing: \"linear\"},\n        zoom: %{enabled: false}\n      }\n    }\n  })\n\n  socket =\n    socket\n    |\u003e assign(:chart, chart)\n    |\u003e assign(:chart_data, [])\n\n  {:ok, socket}\nend\n```\n\nThen, render the empty chart in your heex template:\n\n```elixir\n\u003cLiveCharts.chart chart={@chart} /\u003e\n```\n\nAssuming you already have a mechanism in place to receive new data points in the liveview, you\ncan then update the chart data and push it over the socket:\n\n```elixir\n@impl true\ndef handle_info({:chart_datapoint, {x, y}}, socket) do\n  %{chart: chart, chart_data: data} = socket.assigns\n\n  data = [%{x: x, y: y} | data]\n  series = [%{data: Enum.reverse(data)}]\n\n  socket =\n    socket\n    |\u003e assign(:chart_data, data)\n    |\u003e LiveCharts.push_update(chart, series)\n\n  {:noreply, socket}\nend\n```\n\nWe have used `handle_info/2` here, but chart updates could just as easily be pushed from other\nliveview callbacks. E.g. from `handle_event/3` when the user triggers an event or\n`handle_async/3` when an async task is completed.\n\nA live demo is also available on [livecharts.stax3.com][demos].\n\n\n\n## Looking for help with your Elixir project?\n\n[Stax3][stax3] helps startups craft expressive and engaging solutions for their software needs.\nIf you're looking for expertise for your Elixir/Phoenix projects, we can help! Talk to us at\n[contact@stax3.com][email].\n\n\n\n## License\n\nLiveCharts is licensed under the [MIT License][license].\n\n\n\n\n[license]:          https://opensource.org/license/mit\n[hexpm]:            https://hex.pm/packages/live_charts\n[apexcharts]:       https://apexcharts.com\n[apexcharts-docs]:  https://apexcharts.com/docs/\n[demos]:            https://livecharts.stax3.com/\n[stax3]:            https://stax3.com\n[email]:            mailto:contact@stax3.com\n\n[docs]:             https://hexdocs.pm/live_charts\n[docs-chart]:       https://hexdocs.pm/live_charts/LiveCharts.Chart.html\n[docs-adapter]:     https://hexdocs.pm/live_charts/LiveCharts.Adapter.html\n[docs-apex]:        https://hexdocs.pm/live_charts/LiveCharts.Adapter.ApexCharts.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstax3%2Flive_charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstax3%2Flive_charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstax3%2Flive_charts/lists"}