{"id":23443,"date":"2023-04-11T12:30:58","date_gmt":"2023-04-11T12:30:58","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=23443"},"modified":"2026-01-13T11:30:26","modified_gmt":"2026-01-13T11:30:26","slug":"using-highcharts-for-python-basic-tutorial","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/using-highcharts-for-python-basic-tutorial\/","title":{"rendered":"Using Highcharts for Python &#8211; Basic Tutorial"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-c5bbea69 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<p><a href=\"https:\/\/www.highcharts.com\" target=\"_blank\" rel=\"noopener\">Highcharts Core<\/a>&nbsp;is the gold standard in JavaScript data visualization libraries, enabling you to design rich, beautiful, and highly interactive data visualizations of (almost) any kind imaginable, and to render those visualizations in your web or mobile applications. Take a look at some of the <a href=\"https:\/\/www.highcharts.com\/blog\/posts\/use-cases\/\" target=\"_blank\" rel=\"noopener\">customer showcases<\/a> and the own <a href=\"https:\/\/www.highcharts.com\/demo\" target=\"_blank\" rel=\"noopener\">demo gallery<\/a> to see what you can do with Highcharts.<br><b>Highcharts for Python<\/b> is a Python wrapper for the <a href=\"https:\/\/www.highcharts.com\" target=\"_blank\" rel=\"noopener\">Highcharts Core<span style=\"font-weight: 400;\">&nbsp;JavaScript library<\/span><\/a>, which means that it is designed to give developers working in Python a simple and Pythonic way of interacting with Highcharts Core.<br><b>Highcharts for Python<\/b> will not render data visualizations itself &#8211; that\u2019s what Highcharts Core does &#8211; but it will allow you to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Configure your data visualizations in Python.<\/li>\n\n\n\n<li>Supply data you have in Python to your data visualizations.<\/li>\n\n\n\n<li>Programmatically produce the Highcharts Core JavaScript code that will actually render your data visualization.<\/li>\n\n\n\n<li>Programmatically download a static version of your visualization (as needed) within Python.<\/li>\n<\/ol>\n\n\n\n<p><i><b>Tip<\/b><br>Think of Highcharts for Python as a translator to bridge your data visualization needs between Python and JavaScript.<\/i><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Getting Started with Highcharts for Python<\/h2>\n\n\n\n<p>To use Highcharts for Python, like with any Python library, you first have to install it. That\u2019s super easy: just open your Python project (in your virtual environment \u2013 you are using virtual environments, right?) and execute:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>$ pip install highcharts-core<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>And that\u2019s it! Highcharts for Python will now be installed in your project and available for use. To use it in your code, you just have to import it the way you would any other library.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h3 class=\"wp-block-heading\">Importing Highcharts for Python<\/h3>\n\n\n\n<p>The Highcharts for Python library is quite extensive. It\u2019s got a rich (read: complicated) API, with lots of different objects and modules. That\u2019s a reflection of the visualization power that Highcharts offers you, but it does make the decision of what to import and how to import it a little more complicated.<br>Python\u2019s best practice is to import only what you need, which helps to maximize the performance of your Python code and prevents your application\u2019s namespace from getting cluttered with various things (and further reducing the memory footprint of your Python code, which is always good).<br>You can either import specific things from their precise locations, or you can also just import the catch-all <code>highcharts<\/code> module, which flattens the entire API and exposes just about every class\/object in one location. We definitely recommend importing things from their precise location like so:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code># Import classes using precise module indications. For example:\nfrom highcharts_core.chart import Chart\nfrom highcharts_core.global_options.shared_options import SharedOptions\nfrom highcharts_core.options import HighchartsOptions\nfrom highcharts_core.options.plot_options.bar import BarOptions\nfrom highcharts_core.options.series.bar import BarSeries<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">A Super Simple Example<\/h2>\n\n\n\n<p>While your project is likely more complicated, let\u2019s take a look at the easiest use case: visualizing some data quickly and easily. You likely have your data in a CSV file, or perhaps in a Pandas <code>dataframe<\/code>, or maybe just stored in a list in your Python code. Highcharts for Python can work with all of those scenarios.<br>Let\u2019s assume you have your data stored in a CSV file named <code>\u201cmy-csv-file.csv\u201d<\/code> (creative, right?).<br>You can create a chart from a CSV file by:<\/p>\n\n\n\n<p>1.  Importing the <code>Chart<\/code> type from <code>highcharts_core.chart<\/code>:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code><pre>from highcharts_core.chart import Chart<\/pre><\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>2. Calling the <code>Chart.from_csv()<\/code> class method, which will create a new <code>Chart<\/code> instance:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code><pre>from highcharts_core.chart\nimport Chart\n# Create a new Chart instance from the CSV file \"my-csv-file.csv\".\nmy_chart = Chart.from_csv('my-csv-file.csv',\n  property_column_map = {\n    'x': 0,\n    'y': 3,\n    'id': 'id'\n  },\n  series_type = 'line',\n  chart_kwargs = {\n    'container': 'target_div',\n    'variable_name': 'myChart'\n  })<\/pre><\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>And that\u2019s it! Let\u2019s breakdown what\u2019s happening in the method call above:<br>First, you\u2019re telling the <code>.from_csv()<\/code> method which CSV file to use. That\u2019s pretty straightforward. But the magic really happens in the next three arguments:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>property_column_map<\/code> argument, which tells the method which CSV columns correspond to which properties in the series\u2019 data points, and<\/li>\n\n\n\n<li>The <code>series_type<\/code> argument, which tells the method that you want to plot the CSV data in a line series (plot the data points as a line).<\/li>\n\n\n\n<li>The <code>chart_kwargs<\/code> argument, which supplies other keyword arguments used to configure your <code>Chart<\/code> instance.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">The property_column_map Argument<\/h2>\n\n\n\n<p>The <code>property_column_map<\/code> argument takes a <code>dict<\/code> whose keys correspond to the properties in the series type\u2019s <code>.data<\/code> property. That can seem a little complicated, but think of it this way:<br>Highcharts supports over 70 different series types in its visualization suite. Different series types may have different properties for their data points. Some (like the <code>LineSeries<\/code> shown above) may be very simple: they get an <code>\u201cx\u201d<\/code> value for the x-axis, and a <code>\u201cy\u201d<\/code> value for the y-axis, and an <code>\u201cid\u201d<\/code> that uniquely identifies the data point.<br>The keys in <code>property_column_map<\/code> are the data point properties that should be populated. In the example above, the <code>\u201cx\u201d<\/code> key corresponds to the data point\u2019s .<code>x<\/code> property, the <code>\u201cy\u201d<\/code> key corresponds to the data point\u2019s <code>.y<\/code> property, and the \u201cid\u201d key corresponds to the data point\u2019s <code>.id<\/code> property.<br>So the <code>property_column_map<\/code> argument tells Highcharts for Python which CSV column maps to which property. Pretty straightforward!<\/p>\n\n\n\n<p><i><b>Tip<\/b><br>If you use convenience methods like <code>.from_csv()<\/code>, make sure to review the series type\u2019s data points to map your data to the appropriate properties. You can do so in the extensive <a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/api.html\" target=\"_blank\" rel=\"noopener\">API Reference<\/a> for the series type you want to chart.<\/i><\/p>\n\n\n\n<p>Some CSV files may contain headers, while others might not contain headers. For that reason, the <code>column_property_map<\/code> values accept either integers (which indicate which column in your CSV file should map to that property) or strings (which contain the column name if your CSV file contains a header).<\/p>\n\n\n\n<p><i><b>Warning<\/b><br>By default, <b>Highcharts for Python<\/b> expects that your CSV file has a header row, but you can override this expectation by supplying an argument <code> has_header_row = False<\/code> to the <code>.from_csv()<\/code> method.<\/i><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">The series_type Argument<\/h2>\n\n\n\n<p>Using the <code>series_type<\/code> argument, you determine which series type will be used to visualize your data. You can find a complete list of supported series types in the <b>Supported Visualizations<\/b> section of our documentation.<br>In the example above, we use all of the default settings for the <code>LineSeries<\/code> that gets created, but you can further configure your series by passing its configuration options in a <code>series_kwargs<\/code> argument. That argument expects a <code>dict<\/code> whose keys map to the series properties you wish to configure, and whose values are the values that you want to apply.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">The chart_kwargs Argument<\/h2>\n\n\n\n<p>Just as you can use the optional <code>series_kwargs<\/code> argument to configure the series of data you are creating, you can use the <code>chart_kwargs<\/code> argument to configure your <code>Chart<\/code> instance. This argument expects a <code>dict<\/code> whose keys map to the <code>Chart<\/code> properties you wish to configure, and whose values are the values that you want to apply.<br>In the example above, we are setting the <code>my_chart.container<\/code> property (giving it the value <code>target_div<\/code>) and the <code>my_chart.variable_name<\/code> property (giving it the value <code>\u201cmyChart\u201d<\/code>). These chart properties are very important for rendering your chart in a web environment, so we\u2019ll discuss them in greater detail below.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">Other Approaches<\/h2>\n\n\n\n<p>The example above focuses on using a CSV file, but Highcharts for Python has you covered regardless of how you are managing your data in your Python application. You have similar convenience functions for loading data:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/api\/chart.html#highcharts_core.chart.Chart.from_pandas\" target=\"_blank\" rel=\"noopener\">.from_pandas()<\/a><\/code> that loads data from a Pandas Dataframe.<\/li>\n\n\n\n<li><code><a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/api\/chart.html#highcharts_core.chart.Chart.from_pyspark\" target=\"_blank\" rel=\"noopener\">.from_pyspark()<\/a><\/code> that loads data from a PySpark Dataframe.<\/li>\n\n\n\n<li><a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/api\/options\/series\/data\/base.html#highcharts_core.options.series.data.base.DataBase.from_array\" target=\"_blank\" rel=\"noopener\"><code>.from_array()<\/code><\/a> that loads data from an iterable.<\/li>\n<\/ul>\n\n\n\n<p>You can call these convenience methods on the <code>Chart<\/code> class as shown above, or you can also call the exact same convenience methods on a series type, and then add the series to a chart instance using the <code><a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/api\/chart.html#highcharts_core.chart.Chart.add_series\" target=\"_blank\" rel=\"noopener\">my_chart.add_series()<\/a><\/code> method.<\/p>\n\n\n\n<p><i><b>Tip<\/b><br>Our other tutorials show you in detail how to use these different convenience methods to rapidly build great visualizations \u2013 we recommend you check out here: Highcharts for Python Tutorials.<\/i><br>And that\u2019s it! You now have a fully-configured <code>Chart<\/code> instance containing the data from your CSV file. We\u2019ll describe how to actually use this <code>Chart<\/code> instance down below.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">Visualizing Your Chart<\/h2>\n\n\n\n<p>Now that we\u2019ve built a <code>Chart<\/code> instance and populated it with data, our next step is to visualize it. How you actually do this depends to some extent on how you are building your Python application.<br>Maybe you are using a web framework like Flask, Django, or FastAPI and relying on their templating engines for creating your views. Or maybe you are providing a Python backend API that delivers data to an entirely separate app via RESTful API calls. In any case, to visualize your new chart you need to somehow get its configuration to your web-based front-end. And that is super simple as well.<br>Using the example above, you can generate the full set of HTML and JavaScript content to render your chart with one method call:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>as_js_literal = my_chart.to_js_literal()\n# This will produce a string equivalent to:\n#\n# document.addEventListener('DOMContentLoaded', function() {\n#   const myChart = Highcharts.chart('target_div', {\n#      series: {\n#          type: 'line',\n#          data: &#91;0, 5, 3, 5]\n#      }\n#   });\n# });<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>So what is this method call doing? It is taking the entire set of instructions included in your <code>my_chart<\/code> variable, creating a JavaScript literal string that represents them, and putting that string in the <code>as_js_literal<\/code> Python variable. This string can then be piped into your web front end using whatever templating engine you are using, or delivered to your front-end in an API response, and it will then render your chart as you configured it.<br>In the example above, if you place the <code>as_js_literal<\/code> string in what gets rendered in your user\u2019s browser, your chart will be automatically rendered by <a href=\"https:\/\/www.highcharts.com\" target=\"_blank\" rel=\"noopener\">Highcharts Core<\/a>, placing the chart inside the div element in your content whose <code>id<\/code> is <code>\u201ctarget_div\u201d<\/code>.<br>And that\u2019s it! You should now see a beautiful line chart in your web content.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">Downloading Your Chart<\/h2>\n\n\n\n<p>Often when you\u2019ve created a visualization, you may want to download a static version of it as an image that can be embedded in other documents. With Highcharts for Python, that is a fairly trivial exercise. Given the example above, you can produce a PNG image very simply with one method call:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code># Download a PNG version of the chart in memory within your Python code.\nmy_png_image = my_chart.download_chart(format = 'png')\n# Download a PNG version of the chart and save it the file \"\/images\/my-chart-file.png\"\nmy_png_image = my_chart.download_chart(\n  format = 'png',\n  filename = '\/images\/my-chart-file.png'\n)<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>The two examples shown above both download a PNG of your chart:<br>The first example keeps that PNG image in your Python code only, storing its binary data in the <code>my_png_image<\/code> variable. The second example not only stores its binary data in the <code>my_png_image<\/code> variable, but it also saves the PNG image to the file <code>\u201c\/images\/my-chart-file.png\u201d<\/code>.<br>The <code>format<\/code> argument is really the one doing the heavy lifting above. In the example above, it tells the method to generate a PNG image, but you can also create <code>\u201cjpeg\u201d<\/code>, <code>\u201cpdf\u201d<\/code>, and <code>\u201csvg\u201d<\/code>.<br>And that\u2019s it! You should know that the <code>.download_chart()<\/code> method defaults to using the <a href=\"https:\/\/www.highcharts.com\/docs\/export-module\/export-module-overview\" target=\"_blank\" rel=\"noopener\">Highcharts Export Server<\/a> provided by Highsoft (creators of <a href=\"https:\/\/www.highcharts.com\" target=\"_blank\" rel=\"noopener\">Highcharts Core<\/a>), however you can configure the method to use your own custom Highcharts Export Server if you choose. For more details on how to do this, please review our tutorial on <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/exporting-static-charts-highcharts-python\" target=\"_blank\" rel=\"noopener\">Exporting Static Charts using Highcharts for Python<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\">More Resources<\/h2>\n\n\n\n<p>The above tutorial is just a really simple example of how you can create rich visualizations with just a handful of method calls using Highcharts for Python. But the library offers so much more! We recommend you take a look at the following additional resources which you may find useful:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/exporting-static-charts-highcharts-python\" target=\"_blank\" rel=\"noopener\">Exporting Static Charts using Highcharts for Python<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/templating-and-shared-options-highcharts-python\" target=\"_blank\" rel=\"noopener\">Using Templating and Shared Options in Highcharts for Python <\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/highcharts-python-pandas-pyspark\" target=\"_blank\" rel=\"noopener\">Using Highcharts for Python with Pandas and PySpark <\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/api.html\" target=\"_blank\" rel=\"noopener\">Highcharts for Python: API Reference Documentation<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-355c4241 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\"><strong>Related posts<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/data-visualization-library-by-highcharts\/\">Data visualization library by Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/charts-in-javascript-with-highcharts\/\">Charts in JavaScript with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-data-visualization-with-highcharts\/\">JavaScript data visualization with Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-graph-visualization-library-by-highcharts\/\">JavaScript graph visualization library by Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-library-by-highcharts\/\">JavaScript library by Highcharts<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/data-charting-with-highcharts\/\">Data charting with Highcharts<\/a><\/li>\n<\/ul>\n\n\n\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>An essential step-by-step tutorial to learn how to create python charts with Highcharts<\/p>\n","protected":false},"author":273,"featured_media":23571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[1094,885],"coauthors":[983],"class_list":["post-23443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-highcharts-core","tag-python"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/273"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=23443"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23443\/revisions"}],"predecessor-version":[{"id":28588,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23443\/revisions\/28588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/23571"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=23443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=23443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=23443"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=23443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}