{"id":33133853,"url":"https://github.com/lcallarec/live-chart","last_synced_at":"2025-11-20T04:01:11.630Z","repository":{"id":43335665,"uuid":"202731777","full_name":"lcallarec/live-chart","owner":"lcallarec","description":"A real-time charting library for Vala and GTK4 based on Cairo","archived":false,"fork":false,"pushed_at":"2025-01-23T19:46:07.000Z","size":6565,"stargazers_count":75,"open_issues_count":11,"forks_count":16,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-23T20:29:30.965Z","etag":null,"topics":["cairo","cairo-chart-library","chart","chart-widget","charting-library","elementaryos","gtk","gtk3","vala","vala-library","widget"],"latest_commit_sha":null,"homepage":"","language":"Vala","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/lcallarec.png","metadata":{"files":{"readme":"README.md","changelog":"NEWS.md","contributing":"CONTRIBUTING.md","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":"2019-08-16T13:24:16.000Z","updated_at":"2025-01-23T19:46:12.000Z","dependencies_parsed_at":"2024-05-03T02:57:59.480Z","dependency_job_id":"9b93edb6-c91d-4f2d-a181-e1859a2de7d7","html_url":"https://github.com/lcallarec/live-chart","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/lcallarec/live-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lcallarec%2Flive-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lcallarec%2Flive-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lcallarec%2Flive-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lcallarec%2Flive-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lcallarec","download_url":"https://codeload.github.com/lcallarec/live-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lcallarec%2Flive-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285369043,"owners_count":27159982,"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","status":"online","status_checked_at":"2025-11-20T02:00:05.334Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cairo","cairo-chart-library","chart","chart-widget","charting-library","elementaryos","gtk","gtk3","vala","vala-library","widget"],"created_at":"2025-11-15T10:00:38.784Z","updated_at":"2025-11-20T04:01:11.622Z","avatar_url":"https://github.com/lcallarec.png","language":"Vala","funding_links":[],"categories":["Libraries"],"sub_categories":["Graphics Libraries"],"readme":"# Live Chart\n\n![CI](https://github.com/lcallarec/live-chart/workflows/CI/badge.svg) \n[![codecov](https://codecov.io/gh/lcallarec/live-chart/branch/master/graph/badge.svg)](https://codecov.io/gh/lcallarec/live-chart)\n[![Release](https://img.shields.io/github/release/lcallarec/live-chart.svg)](https://github.com/lcallarec/live-chart/releases)\n[![License](https://img.shields.io/github/license/lcallarec/live-chart)](https://github.com/lcallarec/live-chart/blob/master/LICENSE)\n\n#### Live Chart is a real-time charting library for GTK4 and Vala, based on [Cairo](https://cairographics.org/).\n\n## Features\n\n* Live animated series (lines, smooth lines, area, bar) within a single chart\n* Smart y-axis computation\n* Highly configurable\n* Extendable\n\n## Screenshots\n\n![](resources/chart1.gif)  ![](resources/chart2.gif)\n  \n# Documentation\n\n- [Getting started](#getting-started)\n- [Dependencies](#dependencies)\n- [API](#api)\n- [Chart widget](#chart-widget)\n- [Series](#series)\n- [Serie renderers](#serie-renderers)\n- [Chart configuration](#chart-configuration)\n- [Background](#background)\n- [Legend](#legend)\n- [Chart element visibility](#chart-element-visibility)\n- [Advanced usages](#advanced-usages)\n- [CAUTIONS](#cautions)\n- [How Livechart versions works ?](#how-livechart-versions-works)\n\n    *N.B.: Classes and methods available in the source code and not documented here - even if they are public - are subject to change without warning in any future release*\n\n## Getting started\n\nTake a look at code examples :\n\n* [General example](examples/live-chart.vala)\n* [Fixed max y-axis value](examples/fixed-max.vala)\n* [Hide chart elements](examples/hide-parts.vala)\n* [Label configuration](examples/configure-labels.vala)\n* [Static renderers](examples/static-renderer.vala)\n\nCompile and run with :\n\n```bash\nmeson build\nninja -C build\n./build/examples/example\n./build/examples/example-fixed-max\n./build/examples/example-hide-parts\n./build/examples/example-configure-labels\n./build/examples/example-static-renderer\n```\n\n## Dependencies\n\n| dependency | \n|---------|\n| libgee-0.8-dev   |\n| libgtk-4-dev  |\n\n## API\n\n[Full valadoc API documentation here](https://lcallarec.github.io/live-chart/Livechart/LiveChart.html)\n\n## Chart widget\n\n`Chart` widget is the main entrypoint of your live chart.\n\n```vala  \nvar chart = new LiveChart.Chart();\n```\n\nAs `Chart` object derives from `Gtk.DrawingArea`, you can directly attach it to any container widgets :\n\n```vala\nvar window = new Gtk.Window();\nwindow.set_child(chart);\n```\n\n## Series\n\nA `Serie` is basically a structure that :\n\n* Contains its own data set\n* Has a name, like `Temperature in Paris`\n* Know how it renders on the chart, i.e as `Bar`, a `Line`, a `SmoothLineArea`...\n\n### Create and attach a **Serie**\n\n```vala\n// Serie with a default Line renderer\nvar serie_name = \"Temperature in Paris\";\nvar paris_temperature = new LiveChart.Serie(serie_name);\n\n// Or inject the renderer\nvar serie_name = \"Temperature in Paris\";\nvar paris_temperature = new LiveChart.Serie(serie_name, new LiveChart.Bar());\n```\n\nThen register the `Serie` to the `Chart` :\n\n```vala\nvar serie_name = \"Temperature in Paris\";\nvar paris_temperature = new LiveChart.Serie(serie_name);\nchart.add_serie(paris_temperature);\n```\n\nThe serie attached into chart is removable from the chart.\n```vala\nvar paris_temperature = new LiveChart.Serie(\"Temperature in Paris\");\nvar msm_temperature = new LiveChart.Serie(\"Temperature in Mont Saint-Michel\");\nchart.add_serie(paris_temperature);\nchart.add_serie(msm_temperature);\n//...\nchart.remove_serie(paris_temperature);  //Remove specified serie.\nchart.remove_all_series();              //Remove all series from the chart.\n```\n\n### Interacting with series\n\nAll methods of `Serie` class could be called before or after having been attached to the chart using `chart.add_serie` method, exepted for the `Renderer` and underlying data store.\n\nAccessing a serie can be done via :\n\n* the local reference in your code \n* the accessor methods of `chart.series` object : by index `chart.series[index] / chart.series.get(index)` or by name `chart.series.get_by_name(name)`. Beware, these methods may throw a `ChartError.SERIE_NOT_FOUND` error. \n\n#### Adding data points method\n\nPlease note that your `Serie` must have been registered to the `Chart` before being able to add data points to this serie.\n\nAdding a point / value to a serie using [serie.add](https://lcallarec.github.io/live-chart/Livechart/LiveChart.Serie.add.html) method automatically compute a timestamp stored in underlying value container.\nIf you need to manually compute a timestamp, in milliseconds, use [serie.add_with_timestamp(double value, int64 timestamp)](https://lcallarec.github.io/live-chart/Livechart/LiveChart.Serie.add_with_timestamp.html)\n\n```vala\nserie.add(19.5);\n//or\nserie.add_with_timestamp(19.5, 15978984664);\n```\n\n#### Name\n\n```vala\nserie.name = \"Temperature in Paris (%s)\".printf(last_value);\n```\n\n#### Visibility\n\nYou can programmatically hide / display the serie :\n\n```vala\nserie.visible = true;//or false\n```\n\n#### Lines and outlines\n\nLines and outlines (for bar series) can be configured with `Serie.line` property. Full configuration details available in [Path](https://lcallarec.github.io/live-chart/Livechart/LiveChart.Path.html) class.\n\n```vala\nserie.line.color = { 0.0f, 0.1f, 0.8f, 1.0f };\nserie.line.width = 2;\nserie.line.dash = LiveChart.Dash() {dashes = {1}, offset = 2};\nserie.line.visible = false;//or true\n```\n\nAbout color : [`Gdk.RGBA`](https://valadoc.org/gtk4/Gdk.RGBA.html) struct.  \nDashes : please refer to [valadoc](https://valadoc.org/cairo/Cairo.Context.set_dash.html) and [cairo c documentation](https://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-dash)\n\nFor series with area, this impact only the outline, not the area itself.\n\n#### Clear underlying data\n\nRemove all data from underlying data store :\n\n```vala\nserie.clear();\n```\n\n#### Data accessor\n\n```vala\nserie.get_values();\n```\n\n### Underlying data buffer\n\nWhen you add a data point to a serie, it is stored in a `LiveChart.Values` object, which derives from `Gee.LinkedList`.\nTo avoid your program growing too much in memory, be default, `LiveChart.Values` keeps only the last 1000 values.\nYou can change that behaviour by injecting manually a `LiveChart.Values` object in your serie and specify the buffer size in `Values` constructor. \n\n```vala\nvar serie_name = \"Temperature in Paris\";\nvar values = new LiveChart.Values(50000); // buffer of 50 000 data points\nvar paris_temperature = new LiveChart.Serie(serie_name, new LiveChart.Line(values));\n\nchart.add_serie(paris_temperature);\n```\n\n## Serie renderers\n\nA Serie renderer is responsible of drawing data points to the chart's surface. It is passed as second argument of `Serie` constructor :\n\n```vala\nvar serie_name = \"Temperature in Paris\";\nvar values = new LiveChart.Values(50000); // buffer of 50 000 data points\nvar paris_temperature = new LiveChart.Serie(serie_name, new LiveChart.Line(values));\n\nchart.add_serie(paris_temperature);\n```\n\nThere's currently 6 built-in series available.\n\n### Lines\n\n* [`LiveChart.Line`](https://github.com/lcallarec/live-chart/blob/master/src/line.vala)\n\nLine renderer connects each data point with a straight segment.\n\n![](resources/renderer_line.png)\n\n* [`LiveChart.SmoothLine`](https://github.com/lcallarec/live-chart/blob/master/src/smooth_line.vala)\n\nSmooth line renderer connects each data point with a bezier spline for a smoother rendering.\n\n![](resources/renderer_smooth_line.png)\n\n\n### Lines with area\n\nFor area renderers, you can control the area color via the `area_alpha: double` property (default : 0.1):\n\n```vala\nvar smooth_line = new LiveChart.SmoothLineArea();\nsmooth_line.line.color = Gdk.RGBA() {red = 0.0f, green = 0.0f, blue = 1.0f, alpha = 1.0f};\nsmooth_line.area_alpha = 0.5;\n```\n\nThe area color is not yet configurable : it's always equal to `color`.\n\n* [`LiveChart.LineArea`](https://github.com/lcallarec/live-chart/blob/master/src/line_area.vala)\n![](resources/renderer_line_area.png)\n\n* [`LiveChart.SmoothLineArea`](https://github.com/lcallarec/live-chart/blob/master/src/smooth_line_area.vala)\n![](resources/renderer_smooth_line_area.png)\n\n### Histogram\n\n* [`LiveChart.Bar`](https://github.com/lcallarec/live-chart/blob/master/src/bar.vala)\n![](resources/renderer_bar.png)\n\n### Static lines\n\n* [`LiveChart.ThresholdLine`](https://github.com/lcallarec/live-chart/blob/master/src/threshold_line.vala)\n\nThreshold renderer draws a straight line at a given value. Below, the red threshold line is defined at 200MB :\n\n![](resources/renderer_threshold_line.png)\n\n```vala\nvar threshold = new LiveChart.ThresholdLine(200.0);\nthreshold.line.color = { 0.8f, 0.1f, 0.1f, 1.0f };\nthreshold.value = 250.0; // update threshold at runtime\nvar serie = new LiveChart.Serie(\"threshold\", threshold);\n```\n\n* [`LiveChart.MaxBoundLine`](https://lcallarec.github.io/live-chart/Livechart/LiveChart.MaxBoundLine.html) and [`LiveChart.MinBoundLine`](https://lcallarec.github.io/live-chart/Livechart/LiveChart.MaxBoundLine.html)\n\nMax and Min bound line renderer draws a straight line which represents either a `MIN` or a `MAX` of a given serie, or of all series. In the example below, the yellow line represents the `MAX` value of **all** series, the purple one represents the `MAX` of **HEAP**\n\n![](resources/renderer_min_max_bound_line.png)\n\n\n```vala\nvar heap = new LiveChart.Serie(\"HEAP\", new LiveChart.SmoothLineArea());\nheap.line.color = { 0.3f, 0.8f, 0.1f, 1.0f };\n\nvar rss = new LiveChart.Serie(\"RSS\", new LiveChart.Line());\nrss.line.color = { 0.8f, 0.1f, 0.8f, 1.0f };\n\nvar max = new LiveChart.Serie(\"MAX OF RSS OR HEAP\", new LiveChart.MaxBoundLine());\nvar mrss = new LiveChart.Serie(\"MAX HEAP\", new LiveChart.MaxBoundLine.from_serie(rss));\nmax.line.color = { 0.8f, 0.5f, 0.2f, 1.0f };\nmrss.line.color = { 0.5f, 0f, 1.0f, 1.0f };\n\nchart.add_serie(heap);\nchart.add_serie(rss);\nchart.add_serie(max);\nchart.add_serie(mrss);\n```\n\n## Chart configuration\n\nThe Configuration object can be retrieved from `Chart.config` property for further adjustments :\n\n```vala\nvar chart = new LiveChart.Chart();\nvar config = chart.config;\n// Adjust the configuration\n```\n\nYou can also inject the `Config` object to the chart constructor if you prefer to adjust is before chart first renderer :\n\n```vala\nvar config = new LiveChart.Config();\n// Adjust the configuration\nvar chart = new LiveChart.Chart(config);\n```\n\n### Axes configuration\n\n#### Labels (x and y axis)\n\nLabels are the time for the x-axis and values for the y-axis.\n\n* Axes labels visibility\n\n```vala\nvar labels = config.x_axis.labels;\n//or\nvar labels = config.y_axis.labels;\n\nlabels.visible = false;\n```\n\n* Axes label fonts\n\n```vala\nvar labels = config.x_axis.labels;\n//or\nvar labels = config.y_axis.labels;\n\nlabels.font.size = 12;                      // uint8     In pixels\nlabels.font.color = { 1.0f, 0.0f, 0.0f, 1.0f };   // Gdk.RGBA\nlabels.font.weight = Cairo.FontWeight.BOLD; // Cairo.FontWeight\nlabels.font.slant =  Cairo.FontSlant.ITALIC;// Cairo.FontSlant\n```\n\n#### Axis lines\n\nAxis lines are horizontal or vertical guidelines - depending on which axis they're attached - aligned on labels.\n\n![Line axis](resources/axis_lines_config.png)\n\n* Line color\n\n```vala\nvar axis = config.x_axis;\n//or\nvar axis = config.y_axis;\n\naxis.lines.color = Gdk.RGBA() {red = 1.0f, green = 1.0f, blue = 1.0f, alpha = 0.2f}; //Light grey\n```\n\n* Line width\n\n```vala\nvar axis = config.x_axis;\n//or\nvar axis = config.y_axis;\n\naxis.lines.width = 1.0;\n```\n\n* Line dashes\n\n```vala\nvar axis = config.x_axis;\n//or\nvar axis = config.y_axis;\n\naxis.lines.dash = LiveChart.Dash() {dashes = {5.0}, offset = 0.0};\n```\n\nFor more information about cairo dashes, please refer to [valadoc](https://valadoc.org/cairo/Cairo.Context.set_dash.html) and [cairo c documentation](https://www.cairographics.org/manual/cairo-cairo-t.html#cairo-set-dash)\n\n\n* Lines visibility\n\n```vala\nvar axis = config.x_axis;\n//or\nvar axis = config.y_axis;\n\naxis.lines.visible = false;\n```\n#### Main axes (a.k.a x and y axis, or abscissa and ordinate)\n\nMain axes can be configured via the `axis` attribute of each axis :\n\n```vala\nvar axis_config = config.x_axis.axis;\n//or\nvar axis_config = config.y_axis.axis;\n```\n\nThe configuration is the same than [Axis lines](#axis-lines) :\n\n\n```vala\nvar axis_config = config.x_axis.axis;\n//or\nvar axis_config = config.y_axis.axis;\n\naxis_config.color = Gdk.RGBA() {red = 1.0f, green = 1.0f, blue = 1.0f, alpha = 0.2f}; //Light grey\naxis_config.width = 1.0;\naxis_config.dash = LiveChart.Dash() {dashes = {5.0}, offset = 0.0};\naxis_config.visible = false;\n```\n\n#### x-axis\n\n* Tick interval (*in seconds*, default 10)\n\nDefine the time laps, in seconds, between each ticks on x-axis.\n\n```vala\nvar x_axis = config.x_axis;\nx_axis.tick_interval = 10; // 10 seconds between each ticks\n```\n\nThe lower is the value, the faster the data points are moving from right to left.\n\n* Tick length (*in pixels*, default 60)\n\nDefine the distance, in pixels, between each ticks on x-axis.\n\n\n```vala\nvar x_axis = config.x_axis;\nx_axis.tick_length = 60; // 60 pixels between each ticks\n```\n\nFor example, with `tick_interval=10`  and `tick_length=60`, each second is displayed as 6 pixels on the chart.\n\n* Show fraction (*bool*, default false)\n\nDefine if the timepoints on x-axis would be printed with fractional part or not.\n\n```vala\nvar x_axis = config.x_axis;\nx_axis.show_fraction = true; // Shows timepoint in the format: \"HH:MM:SS.xxx\"\n```\n\n* Slide timeline (*bool*, default false)\n\nDefine if the timeline(each of timepoints and grid line) is moving or fixed.\nIf true, then each timepoints has fixed value, slides along the flow of time.\n\n```vala\nvar x_axis = config.x_axis;\nx_axis.slide_timeline = true; // Slides the timeline like horizontal scrolling with the chart.\n```\n\n#### y-axis\n\n* Unit\n\nDefine the unit of values displayed along y-axis. Default to empty string.\n\n```vala\nvar y_axis = config.y_axis;\ny_axis.unit = \"%\";\n```\n\n* Fixed maximum value (default null)\n\nSometimes, the maximum value displayed on y-axis must be fixed, for example when value is a percentage, or whenever you know the maximum possible value.\n\n```vala\nvar y_axis = config.y_axis;\ny_axis.unit = \"%\";\ny_axis.fixed_max = 100.0;\ny_axis.tick_interval = 25.0f;\n```\n\nWith this configuration, the y-axis will display 5 ticks : 0%, 25%, 50%, 75% and 100%, the maximum possible value.\n\n![](resources/y_axis_fixed_max.png)\n\n\nSometimes, you won't know the fixed max value. Think about the total memory available on a system. In that case, you may want to cap it a bit higher in order to keep optimal chart ventilation.\nFor instance, if the max value is `8.2`, you may want to ceil it to `9`, or if the max value is `859` you may want to ceil it to `900`.\n\nFor that purpose, use `LiveChart.cap` method :\n\n```vala\nvar y_axis = config.y_axis;\ny_axis.unit = \"GB\";\ny_axis.fixed_max = LiveChart.cap((int) max_mem);\n```\n\n* Ratio threshold (default 1.118)\n\nWhen not using `fixed_max` options, the chart drawable area is 1.118 times higher than needed to display all points. You can reduce or increase that ratio :\n\n```vala\nvar y_axis = config.y_axis;\ny_axis.ratio_threshold = 1.0f; // The higher point will always be on the higher part of the chart\ny_axis.ratio_threshold = 2.0f; // The higher point will always be on the middle of the drawing area\n```\n\n#### Paddings\n\nPaddings are distance between the chart window and the real drawing area where your data will be displayed.\n\n```vala\nvar config = new LiveChart.Config();\nconfig.padding = LiveChart.Padding() {\n    smart = AutoPadding.TOP | AutoPadding.RIGHT | AutoPadding.BOTTOM | AutoPadding.LEFT,\n    top = 0,\n    right = 0,\n    bottom = 0,\n    left = 0\n};\nvar chart = new LiveChart.Chart(config);\n```\n\n#### Smart paddings\n\nBy default, because side paddings may depends on text length and font size, smart auto-padding feature is set to `AutoPadding.TOP | AutoPadding.RIGHT | AutoPadding.BOTTOM | AutoPadding.LEFT`. It means all paddings are smart computed.\n\nSmart paddings are bit fields (a.k.a flags), so you can apply bitwise operators to combine them :\n\n```vala\n// Smart padding only for Left and Bottom paddings\nconfig.padding.smart = LiveChart.AutoPadding.LEFT | LiveChart.AutoPadding.BOTTOM;\n```\n\nWhen a side isn't configured as \"smart\", it fallbacks to global padding settings.\n\nTo complety disable smart padding, set `config.padding.smart` to `AutoPadding.NONE`.\n\n#### Global paddings\n\nPaddings can be set - in pixel - for each sides. If you need to force a padding, remember to disable the smart padding for this side.\n\n```vala\n// Remove AutoPadding.TOP from smart padding before setting a custom padding.top value\nconfig.padding.smart \u0026= ~LiveChart.AutoPadding.TOP;\nconfig.padding.top = 10; // in pixels\n```\n## Background\n\nChart has a default colored background that can be changed via the `Background.color` property :\n\n```vala\nvar chart = new LiveChart.Chart();\nchart.background.color = Gdk.RGBA() {red = 1.0f, green = 1.0f, blue = 1.0f, alpha = 1.0f}; //White background\n```\n\n## Legend\n\n* Visibility\n\n```vala\nvar chart = new LiveChart.Chart(config);\n\nchart.legend.visible = false; // Hide legend\n```\n\n* Legend font\n\n```vala\nvar chart = new LiveChart.Chart(config);\nvar legend = chart.legend;\n\nlegend.labels.font.size = 12;                      // uint8     In pixels\nlegend.labels.font.color = { 1.0f, 0.0f, 0.0f, 1.0f };   // Gdk.RGBA\nlegend.labels.font.weight = Cairo.FontWeight.BOLD; // Cairo.FontWeight\nlegend.labels.font.slant =  Cairo.FontSlant.ITALIC;// Cairo.FontSlant\n```\n\n## Chart element visibility\n\nYou can prevent all chart parts from being displayed, by using the `visible` property of each part.\n\n```vala\nvar config = new LiveChart.Config();\n\nvar chart = new LiveChart.Chart(config);\nchart.legend.visible = false; //Hide legend\nchart.grid.visible = false;   //Hide grid\n```\n\nIf you want to get rid of chart padding, remember to disable `smart` paddings and set all paddings to `0`.\n\n```vala\nvar config = new LiveChart.Config();\nconfig.padding = LiveChart.Padding() { smart = LiveChart.AutoPadding.NONE, top = 0, right = 0, bottom = 0, left = 0};\n```\n\n![](resources/hide_parts_no_paddings.png)\n\nIn order to hide labels only, refer to [axis labels](#labels-x-and-y-axis)\n\n* Axes visibility\n\n```vala\nvar axis = config.x_axis;\n//or\nvar axis = config.y_axis;\n\naxis.axis.visible = false;\n```\n\n* Both axes \u0026 labels visibility\n\n```vala\nvar axis = config.x_axis;\n//or\nvar axis = config.y_axis;\n\naxis.visible = false;\n```\n\n## Advanced usages\n\n### Programmatic export\n\nYou can export your chart in `PNG` format :\n\n```vala\nvar filename = \"chart_export.png\";\nchart.to_png(filename);\n```\n\n### Controlling refresh rate\n\nBy default, the chart is refreshed every `100ms` and very time a new data point is added.\nIf it doesn't fit your needs, you can adjust the refresh rate. The lower, the smoother.\n\n(Extra)You can also control the scrolling ratio with 2nd arg (default is 1.0).\n\n```vala  \nvar chart = new LiveChart.Chart();\nchart.refresh_every(-1); // means to stop auto-refresh.\nchart.refresh_every(1000); // refresh every 1000ms\nchart.refresh_every(100, 0.0); // refresh every 100ms, and pausing\n```\n\n### Seeking on the timeline\n\nIf you want to watch the past data, then you can specify the time which you want to seek.\nTime is represented in unixtime milliseconds in default.\n\n```vala  \nvar chart = new LiveChart.Chart();\nvar conv_usec = chart.config.time.conv_us;\nchart.config.time.current -= 5000; // Go 5 seconds back.\nchart.config.time.current = GLib.get_real_time() / conv_usec; // Go to System's local time.\n```\n\n### Specify the range of the timeline\n\nIn default, timestamp is treated in milliseconds.\nBut if you want to treat timestamp in microseconds or seconds,\nthen you can call `config.time.set_range` in the first to use other the range in your app.\n\n(Warning!) If you switched to other range from \"m\"(milliseconds), you cannot push values with `Serie.add(double value)`.\n\n```vala\nvar chart = LiveChart.Chart();\nvar serie = new LiveChart.Serie(\"USEC VALS\",  new LiveChart.Line());\nchart.config.time.set_range(\"u\"); //\"u\" means microseconds. \"m\" means milliseconds. \"s\" to seconds.\nchart.add_serie(serie);\nserie.add_with_timestamp(100.0, GLib.get_real_time() / chart.config.time.conv_us); //serie.add(val) is only usable in millisecs.\n```\n\n### Deal with your own data\n\nLiveChart uses custom [Value](https://lcallarec.github.io/live-chart/Livechart/LiveChart.TimestampedValue.html) struct to store recorded values.\nBasically, it stores the value, as a double, and a timestamp.\nIf you use to store in a `Gee.Collection\u003cdouble?\u003e`, without any timestamp information - most of the time because you know the interval between each points - and need to import them in a LiveChart, don't panic, there's a solution. \n\nUse `Chart.add_unaware_timestamp_collection()` or `Chart.add_unaware_timestamp_collection_by_index()`:\n\n```vala\n// Your own dataset\nvar unaware_timestamp_collection = new Gee.ArrayList\u003cdouble?\u003e();\nunaware_timestamp_collection.add(5);\nunaware_timestamp_collection.add(10);\nunaware_timestamp_collection.add(15);\n\nvar chart = new LiveChart.Chart();\nvar serie = new LiveChart.Serie(\"CPU usage\");\n\n//Potentially, you may want to clean up the existing data\nserie.clear();\n\n//You know that, in your own model, there's 2000ms between each of your points\nvar timespan_between_value = 2000;\n\nchart.add_unaware_timestamp_collection(serie, unaware_timestamp_collection, timespan_between_value);\n//or\nchart.add_serie(serie);\nchart.add_unaware_timestamp_collection_by_index(0, unaware_timestamp_collection, timespan_between_value);\n```\n\nEt voilà !\n\n## CAUTIONS\n\n### Removing LiveChart.Chart from Gtk.Widget\n\nRemoving LiveChart.Chart from Gtk.Widget without stopping auto-refresh causes memory leak.\n\n```vala\nvar window = new Gtk.Window();\nvar chart = new LiveChart.Chart();\nwindow.set_child(chart);\n\n//...\nchart.refresh_every(-1);  //Don't forget to stop auto-refresh if your app replaces the LiveChart.Chart widget.\nchart.unparent();\n```\n\n## How LiveChart versions works ?\n\n* For each new feature, the `minor` version number will be bumped\n* For each bug fix, small improvement or documentation update, the `patch` version number will be bumped\n\nWe'll do our best to never break the API on `minor` and `patch` updates. If we do it, it's not intentional so don't hesitate to open an issue !\n\nSome classes, structs, methods, attributes or property will be marked as `Deprecated`, please check the compiler warnings about them. All the stuff marked as `Deprecated` will be removed from Livechart `2.0.0`, one day...\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flcallarec%2Flive-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flcallarec%2Flive-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flcallarec%2Flive-chart/lists"}