{"id":24276,"date":"2023-10-17T19:12:13","date_gmt":"2023-10-17T19:12:13","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24276"},"modified":"2026-01-13T11:36:52","modified_gmt":"2026-01-13T11:36:52","slug":"highcharts-core-for-python-getting-started","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/highcharts-core-for-python-getting-started\/","title":{"rendered":"Highcharts Core for Python (getting started)"},"content":{"rendered":"<p>We\u2019re so glad you want to use <b>Highcharts Core for Python<\/b>! This tutorial will help you get started, and give you a jumping off point to dive into all the great features of the Highcharts visualization suite. Before you really get going, we suggest you take a look at all of the great <a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/visualizations.html\" target=\"_blank\" rel=\"noopener\">visualization types<\/a> you can create using Highcharts for Python and <a href=\"https:\/\/www.highcharts.com\/\" target=\"_blank\" rel=\"noopener\">Highcharts (JS)<\/a>.<\/p>\n<h2>Installation<\/h2>\n<p>First things first, to use <b>Highcharts for Python<\/b> the first step is to install the library (likely to a virtual environment). That\u2019s pretty straightforward:<\/p>\n<p>To install <b>Highcharts Core for Python<\/b>, just execute:<\/p>\n<pre>$ pip install highcharts-core<\/pre>\n<h2>Importing Highcharts Core for Python<\/h2>\n<p>Once you\u2019ve installed <b>Highcharts Core for Python<\/b>, you can import it into your project in two different ways:<br \/>\n<code>from .highcharts<\/code><\/p>\n<pre># Import objects from the catch-all \".highcharts\" module.\r\nfrom highcharts_core import highcharts\r\n\r\n# You can now access specific classes without individual import statements.\r\nhighcharts.Chart\r\nhighcharts.SharedOptions\r\nhighcharts.HighchartsOptions\r\nhighcharts.BarOptions\r\nhighcharts.BarSeries<\/pre>\n<h2>Wrangle Your Data<\/h2>\n<p>Since you want to use <b>Highcharts Core for Python<\/b> to visualize some data, first you\u2019re going to have to wrangle the data into a form you can work with. How you do this really depends on the data you are working with and the other tools you are using in your tech stack.<\/p>\n<p>The <b>Highcharts for Python<\/b> toolkit works with most of the \u201cusual suspects\u201d in the Python ecosystem, including:<\/p>\n<ul>\n<li><a href=\"https:\/\/pandas.pydata.org\/\" target=\"_blank\" rel=\"noopener\">Pandas<\/a><\/li>\n<li><a href=\"https:\/\/www.numpy.org\/\" target=\"blank\" rel=\"noopener\">Numpy<\/a><\/li>\n<li><a href=\"https:\/\/spark.apache.org\/docs\/latest\/api\/python\/index.html\" target=\"_blank\" rel=\"noopener\">PySpark<\/a><\/li>\n<li>CSV files<\/li>\n<li>JSON files<\/li>\n<li>Python <code>dict<\/code> instances<\/li>\n<li>Python iterables (e.g. <code>list<\/code>, <code>tuple<\/code>, etc.)<\/li>\n<\/ul>\n<p>For the sake of simplicity, we\u2019ll work with Python iterables to show how you can quickly get started. Let\u2019s say we have a simple 2-dimensional set of x\/y values that we want to plot:<\/p>\n<pre>my_iterable = [\r\n    [0, 123],\r\n    [1, 456],\r\n    [2, 789],\r\n    [3, 987],\r\n    [4, 654],\r\n    [5, 321]\r\n]<\/pre>\n<p>That\u2019s all I need to wrangle my data! <b>Highcharts for Python<\/b> can work with <code>my_iterable<\/code> directly and easily, wherever data is referenced.<\/p>\n<p><i><b>Tip<\/b><\/p>\n<p>Different Highcharts <a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/glossary.html#term-Series\" target=\"_blank\" rel=\"noopener\">series<\/a> types support different structures of iterable.<\/p>\n<p>Please review the detailed series documentation for series type-specific details of relevant iterable\/array structures.<\/i><\/p>\n<p>Alternatively, we can convert <code>my_iterable<\/code> into a <code>pandas.DataFrame<\/code>, numpy.ndarray, or Python <code>dict<\/code>:<\/p>\n<pre># As a Pandas DataFrame\r\ndf = pandas.DataFrame(my_iterable, columns=['x', 'y'])\r\n\r\n# As a Numpy ndarray\r\nas_ndarray = numpy.asarray(my_iterable)\r\n\r\n# As a Python dict\r\nas_dict = {'x': x[0], 'y': x[1] for x in my_iterable}<\/pre>\n<p>Now, we can consider our data \u201cwrangled\u201d and ready for visualization.<\/p>\n<h2>Assembling a Chart<\/h2>\n<p>With our data wrangled, we can construct a chart with one line of code:<\/p>\n<pre>my_chart = Chart(data = my_iterable, series_type = 'line')<\/pre>\n<p>This will create a <code>Chart<\/code> instance with one <code>series<\/code> of type <code>line<\/code> (represented as a <code>LineSeries<\/code> instance).<\/p>\n<p>Depending on how we\u2019ve wrangled our data, we can similarly produce a chart from a <code>pandas.DataFrame<\/code>, <code>numpy.ndarray<\/code>, or Python <code>dict<\/code>:<\/p>\n<pre># From a Pandas DataFrame\r\n\r\nmy_chart = Chart.from_pandas(df, series_type = 'line')\r\n\r\n# From a Numpy ndarray\r\n\r\nmy_chart = Chart.from_array(as_ndarray, series_type = 'line')\r\n\r\n# From a Python dict\r\n\r\nmy_chart = Chart(data = as_dict, series_type = 'line')<\/pre>\n<p>All of these lines of code are equivalent, and should produce an identical <code>my_chart<\/code>.<\/p>\n<h2>Configuring the Chart<\/h2>\n<p><a href=\"https:\/\/www.highcharts.com\/\" target=\"_blank\" rel=\"noopener\">Highcharts (JS)<\/a> sets the standard for data visualization because it supports a huge number of easy-to-understand configuration options. <b>Highcharts for Python<\/b> makes it easy to configure any of those options directly within Python.<\/p>\n<p>To do that, we can use the <code>Chart.options<\/code> property. Having assembled our chart following the instructions above, <code>my_chart<\/code> already contains a <code>HighchartsOptions<\/code> instance in the <code>Chart.options<\/code> property. You can access the <code>LineSeries<\/code> we created at <code>Chart.options.series<\/code>, and you can set any other options you need on <code>Chart.options<\/code>.<\/p>\n<p>For example, let\u2019s say we want to set the chart\u2019s title to \u201cMy First Chart\u201d. To do that, we can configure the <code>Chart.options.title<\/code> property using either a <code>Title<\/code> instance, or a <code>dict<\/code>:<\/p>\n<pre># as a Title instance\r\n\r\nfrom highcharts_core.options.title import Title\r\n\r\nmy_chart.options.title = Title(text = 'My First Chart')\r\n\r\n# as a dict\r\n\r\nmy_chart.options.title = {'text': 'My First Chart'}<\/pre>\n<p>Either way, the chart\u2019s title will now be set to \u201cMy First Chart\u201d.<\/p>\n<h2>Rendering the Chart<\/h2>\n<p>Once we\u2019ve assembled and configured our chart, we can render it. How we want to render it depends on our exact needs. We can:<\/p>\n<ul>\n<li>Display the chart in a <a href=\"https:\/\/www.jupyter.org\/\" target=\"_blank\" rel=\"noopener\">Jupyter Notebook<\/a><\/li>\n<li>Save the chart as a static image<\/li>\n<li>Generate the JavaScript that will render the chart in your users\u2019 web browser.<\/li>\n<\/ul>\n<h2>Displaying in Jupyter Notebook \/ Jupyter Lab<\/h2>\n<p>If you\u2019re using <b>Highcharts Core for Python<\/b> in a Jupyter Notebook or Jupyter Lab, you can display the chart right in your notebook. Doing so is super simple &#8211; just call the <code>.display()<\/code> method on <code>my_chart<\/code>:<\/p>\n<pre>my_chart.display()<\/pre>\n<p>That\u2019s it! The chart will now render in the output of the cell.<\/p>\n<h2>Saving the Chart as a Static Image<\/h2>\n<p>If you want to save the chart as a static image, you can do so by calling the <code>.download_chart()<\/code> method:<\/p>\n<pre>my_chart.download_chart(filename = 'my_chart.png')<\/pre>\n<p>If you need it in a different format, you can specify the format using the <code>format<\/code> parameter. Highcharts for Python supports PNG (the default), JPEG, PDF, and SVG. For example, to save the chart as a PDF, you can do:<\/p>\n<pre>my_chart.download_chart(filename = 'my_chart.pdf', format = 'pdf')<\/pre>\n<p>And that\u2019s it!<\/p>\n<h2>Rendering in the Web Browser<\/h2>\n<p>If you want to render your chart in your user\u2019s web browser, then you can use <b>Highcharts for Python<\/b> to automatically generate the JavaScript code you will need. The best way to do this is to call the <code>.to_js_literal()<\/code> method on <code>my_chart<\/code>.<\/p>\n<p>This will produce a string (or write to a file) containing the <a href=\"https:\/\/core-docs.highchartspython.com\/en\/latest\/glossary.html#term-JavaScript-Object-Literal-Notation\" target=\"_blank\" rel=\"noopener\">JS literal<\/a> form of your chart and its configuration. If the code contained in this string gets executed in your user\u2019s browser (within a set of <code>script \/script<\/code> tags), it will render your chart.<\/p>\n<p>So the way to get the JS literal is very straightforward:<\/p>\n<pre># EXAMPLE 1.\r\n# Storing the JS literal in a string.\r\n\r\nmy_js_literal = my_chart.to_js_literal()\r\n\r\n# EXAMPLE 2.\r\n# Saving the JS literal to a file named\r\n# \"my-js-literal.js\"\r\n\r\nmy_chart.to_js_literal('my-js-literal.js')<\/pre>\n<p>Now the way to render this chart will ultimately depend on how your application is architected. We see three &#8211; typical &#8211; patterns employed:<\/p>\n<ol>\n<li> If your Python code is responsible for preparing the client-side HTML + JavaScript, then you can include <code> my_js_literal<\/code> in your template file. This pattern works for practically every Python web framework, including <a href=\"https:\/\/www.djangoproject.com\/\" target=\"_blank\" rel=\"noopener\">Django<\/a>, and <a href=\"https:\/\/flask.palletsprojects.com\/en\/3.0.x\/\" target=\"_blank\" rel=\"noopener\">Flask<\/a>.<\/li>\n<li>If your Python code exposes RESTful or GraphQL APIs that are consumed by your client-side application, then you can return the JS literal object as a string via your API. This can then be evaluated in your client-side application using JavaScript\u2019s new <code>Function()<\/code> feature.\n<p><i><b>Caution<\/b><\/p>\n<p>DO NOT USE JAVASCRIPT\u2019S eval() FUNCTION.<\/p>\n<p>It is deprecated, and for good reason:<\/p>\n<p>It represents a major security risk. When using <code>new Function()<\/code>, we recommend balancing the need for simplicity against the need for security. You can secure your code by applying whitelisting techniques, sandboxing the scope of your <code>new Function()<\/code> context, adding additional layers of M2M signed encryption, or employing sanitization techniques on the content of the JS literal returned by your API.<\/p>\n<p>Which specific techniques make sense will depend on your application and your use case.<\/i>\n<\/li>\n<li>If the data in your front-end application is generated on a periodic \/ batch basis, then you can save your JS literal to a static file (saved where consumable by your front-end application) and have your front-end application simply load it as-needed.<\/li>\n<\/ol>\n<p>\u00a0<\/p>\n<h2><strong>Related posts<\/strong><\/h2>\n<ul>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-react\/\">Highcharts Dashboards with React<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-vue\/\">Highcharts Dashboards with Vue<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-angular\/\">Highcharts Dashboards with Angular<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/highcharts-dashboards-with-python\/\">Highcharts Dashboards with Python<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/dashboards\/dashboard-examples-using-highcharts-dashboards\/\">Dashboard examples using Highcharts\u00ae Dashboards<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/javascript-dashboards-with-highcharts\/\">JavaScript dashboards with Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re so glad you want to use Highcharts Core for Python! This tutorial will help you get started, and give you a jumping off point to dive into all the great features of the Highcharts visualization suite. Before you really get going, we suggest you take a look at all of the great visualization types [&hellip;]<\/p>\n","protected":false},"author":273,"featured_media":24292,"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,699],"class_list":["post-24276","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\/24276","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=24276"}],"version-history":[{"count":4,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24276\/revisions"}],"predecessor-version":[{"id":26051,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24276\/revisions\/26051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24292"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24276"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}