{"id":24673,"date":"2024-03-14T17:02:30","date_gmt":"2024-03-14T17:02:30","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24673"},"modified":"2026-01-13T11:45:31","modified_gmt":"2026-01-13T11:45:31","slug":"drawing-with-data-part-1","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/drawing-with-data-part-1\/","title":{"rendered":"Drawing With Data: Part 1"},"content":{"rendered":"

Drawing with data seems like an exercise in overkill, especially in the age of AI-powered image creation and editing. It\u2019s a manual process that involves a lot of trial and error, and the end result is the same as something you could do in minutes using a basic drawing tool. So why do it? Because it\u2019s a fun and challenging way to learn the ins and outs of some of Highcharts\u2019 coolest features.<\/p>\n

Inspiration<\/h2>\n

A few years ago, I worked on a chart animation that included a network graph. I always liked the way the simulated forces of the graph\u2019s layout algorithm caused its nodes and links to undulate, like a graceful jellyfish-octopus hybrid. So I decided to resurrect this shy creature and create an underwater world for it using some of my favorite Highcharts series types and features.<\/p>\n

\"An<\/p>\n

For inspiration, I grabbed a screenshot from an episode of Jungle Beat<\/a>, an animated series about different animals and their adventures. This particular episode happens to be about an \u201coutstanding octopus<\/a>.\u201d<\/p>\n

The shapes of the underwater foliage, sand and sunbeams are pretty basic, and I like the use of atmospheric perspective, where stuff in the background appears fuzzy and darker than the stuff in the foreground.<\/p>\n

I then created a less-detailed sketch of the screenshot (on the right below) to make it easier to draw. This image will serve as a traceable template for my underwater chart art scene.<\/p>\n

\"side-by-side<\/p>\n

 <\/p>\n

Setting Up The Chart<\/h2>\n

To prep for drawing, I set up a basic chart configuration, disabled the credits<\/code> and legend<\/code> and set the title<\/code> text to null. I also set the chart margins to 0 so my scene will extend to the edges of my chart container.<\/p>\n

I then add an xAxis<\/code> and\u00a0 yAxis<\/code>,\u00a0each with a min of 0 and a max of 20. Establishing these min\/max ranges provides a predictable scale that helps me position my drawing\u2019s data points.<\/p>\n

Finally, I set the plotBackgroundImage<\/code> to the sketch I made based on the Jungle Beat screenshot.<\/p>\n

const chart = Highcharts.chart('container', {\r\n\tchart: {\r\n    \t    plotBackgroundImage: 'sea.png',\r\n    \t    margin: 0\r\n\t},\r\n\tlegend: {\r\n    \t    enabled: false\r\n\t},\r\n\tcredits: {\r\n    \t    enabled: false\r\n\t},\r\n\ttitle: {\r\n    \t    text: null\r\n\t},\r\n\txAxis: [\r\n    \t{\r\n        \tmin: 0,\r\n        \tmax: 20,\r\n        \tvisible: false\r\n    \t}\r\n\t],\r\n\tyAxis: [\r\n    \t{\r\n        \tmin: 0,\r\n        \tmax: 20,\r\n        \tvisible: false\r\n    \t}\r\n\t],\r\n\tseries: [ ]\r\n});\r\n<\/pre>\n
One final tip: I recommend assigning a fixed height and width to the chart container div. This ensures the positions of the points will be consistent, making it easier to draw.<\/p>\n
Here\u2019s my setup:<\/p>\n