{"id":24800,"date":"2024-04-05T12:46:20","date_gmt":"2024-04-05T12:46:20","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24800"},"modified":"2026-01-13T11:46:14","modified_gmt":"2026-01-13T11:46:14","slug":"drawing-with-data-part-2","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/drawing-with-data-part-2\/","title":{"rendered":"Drawing with Data: Part 2"},"content":{"rendered":"<p>In <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/drawing-with-data-part-1\/\">part 1<\/a> of our drawing with data tutorial, we began constructing an underwater world for a shy network-graph sea creature, A.K.A the Jellypus.<\/p>\n<p>We drew numerous trees using a bunch of <code>areasplinerange<\/code> series and positioned their points via Highcharts\u2019 draggable points module.\u00a0 Now it\u2019s time to transform them into an underwater forest using CSS and Highcharts\u2019 <code>styledMode.<\/code><\/p>\n<h2><b>It\u2019s alway darkest before the CSS<\/b><\/h2>\n<p>To start, let&#8217;s set the <code>styledMode<\/code> of the <code>chart<\/code> object to true.<\/p>\n<pre>chart: {\r\n \tstyledMode: true,\r\n\tmargin: 0\r\n}\r\n<\/pre>\n<p>Here&#8217;s the result:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"A basic chart configuration with styledMode enabled. With styledMode enabled, all the in-line styling options defined in the chart configuration no longer apply.\" src=\"https:\/\/codepen.io\/nasin\/embed\/Pogovxe?default-tab=result&amp;theme-id=light\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/nasin\/pen\/Pogovxe\"><br \/>\nJellypus 5<\/a> by Nancy Dillon (<a href=\"https:\/\/codepen.io\/nasin\">@nasin<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>What happened? Everything\u2019s black. That\u2019s because enabling <code>styledMode<\/code> disables all the SVG styling attributes defined in the chart configuration. To get the chart back to the way it was, we need to style our chart elements with CSS.<\/p>\n<h2><strong>Why use CSS?<\/strong><\/h2>\n<p>There are numerous benefits to styling a chart with just CSS. Separating the presentation styles from the configuration code makes both easier to maintain and ensures consistency across all of your css-styled data visualizations.<\/p>\n<p>Also, styling with CSS offers more intuitive control when it comes to fill colors and opacities, stroke colors and widths, custom typography and more. CSS also lets you fine tune the way these attributes transform and animate with individual precision.<\/p>\n<p>Note that although you cannot control the layout and position of elements with CSS properties like <code>top<\/code> and <code>left<\/code>, you can transform their positions via CSS\u2019s <code>translate<\/code> function. We\u2019ll get into that later.<\/p>\n<h2><b>Back from black<\/b><\/h2>\n<p>To return the chart to the way we started, I\u2019ll import Highcharts&#8217; default CSS into my CSS file.<\/p>\n<pre>@import url(\u201chttps:\/\/code.highcharts.com\/css\/highcharts.css\");\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Bam! Our weird area spline range shapes are back!<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"Chart with styledMode enabled. All visual attributes are now being styled by external CSS\" src=\"https:\/\/codepen.io\/nasin\/embed\/dyLyEwW?default-tab=result&amp;theme-id=light\" height=\"700\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/nasin\/pen\/dyLyEwW\"><br \/>\nJellypus 6<\/a> by Nancy Dillon (<a href=\"https:\/\/codepen.io\/nasin\">@nasin<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>If you look in highcharts.css, you\u2019ll notice that every chart element, from individual series to axes lines, has a style. To overwrite these styles, all I have to do is create my own versions of them in my CSS file.<\/p>\n<p>For example, the chart background color is controlled by the class <code>.highcharts-background<\/code>. To change it, I\u2019ll add <code>.highcharts-background<\/code> to my CSS file and and set the fill attribute to <code>#448daa<\/code>.<\/p>\n<p>You can also create your own classes and apply them to chart elements in your configuration file via the <code>className<\/code> option.<\/p>\n<p>I\u2019ll do this for the trees by creating two classes called <code>.tree<\/code> and <code>.tree-dark<\/code> and apply them to the appropriate area spline range series using the className option.<\/p>\n<pre>{\r\n  \ttype: \"areasplinerange\",\r\n  \tenableMouseTracking: false,\r\n  \tclassName: \"tree-dark\",\r\n\u2026\r\n<\/pre>\n<p>I\u2019ll do the same for the sand by creating two classes called <code>.sand<\/code> and <code>.sand-highlight<\/code> (for the brighter patches of sand) and apply them to the appropriate <code>areasplinerange<\/code> series.<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"Chart fully styled with CSS. The chart now resembles an underwater forest with trees, vines and a sandy bottom\" src=\"https:\/\/codepen.io\/nasin\/embed\/XWQWLrd?default-tab=result&amp;theme-id=light\" height=\"700\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/nasin\/pen\/XWQWLrd\"><br \/>\nJellypus 8<\/a> by Nancy Dillon (<a href=\"https:\/\/codepen.io\/nasin\">@nasin<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>That looks pretty good. Time to add the sunbeams.<\/p>\n<h2><b>Let there be light<\/b><\/h2>\n<p>I\u2019ll add the sunbeams to the chart using several line series. But before I start, I want to set <code>enableMouseTracking<\/code> to false on my areasplinerange series so I don&#8217;t accidentally drag points out of place while I position my sunbeams.<\/p>\n<p>In <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/drawing-with-data-part-1\/\">the last tutorial<\/a>, I discussed disabling\u00a0 mouse events on an individual series. Since I want to turn off mouse tracking for all areasplinerange series, I\u2019ll create an <code>areasplinerange<\/code> object under <code>plotOptions<\/code> in my chart configuration and set <code>enableMouseTracking<\/code> to false.<\/p>\n<pre>plotOptions: {\r\n    \tarearangespline: {\r\n        enableMouseTracking: false\r\n     }\r\n\u2026\r\n<\/pre>\n<p>If you need to override this setting for a single areasplinerange series,\u00a0 you can do so by setting <code>enableMouseTracking<\/code> to true on the individual series.<\/p>\n<p>Back to the sunbeams\u2026<\/p>\n<p>Based on my sketch, I need at least five sunbeams. They should start from the top right of the chart and end somewhere in the patch of highlighted sand at the bottom middle. Using the \u201cdrawg\u201d method, I\u2019ll take a guess at each line\u2019s x and y values, and then drag them into place and add the revised data to each line series.<\/p>\n<p>When I\u2019m done, my sunbeams look like this:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"Five line series positioned as sunbeams over the stylized underwater scene \" src=\"https:\/\/codepen.io\/nasin\/embed\/oNONrge?default-tab=result&amp;theme-id=light\" height=\"700\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/nasin\/pen\/oNONrge\"><br \/>\nJellypus 9<\/a> by Nancy Dillon (<a href=\"https:\/\/codepen.io\/nasin\">@nasin<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Next, I\u2019ll give all my lines a className of <code>.beam<\/code>, except for the middle one which I\u2019ll give a className of <code>.beam-thick<\/code> because I want to make it wider than the other four. Then I&#8217;ll add my beam classes to my CSS and set their stroke widths, colors and opacities accordingly.<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"The line series we added now appear thick and yellow thanks to CSS\" src=\"https:\/\/codepen.io\/nasin\/embed\/zYXYVqo?default-tab=result&amp;theme-id=light\" height=\"700\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/nasin\/pen\/zYXYVqo\"><br \/>\nJellypus 10<\/a> by Nancy Dillon (<a href=\"https:\/\/codepen.io\/nasin\">@nasin<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>My sunbeams need to look more ethereal. To accomplish this, I\u2019ll create an SVG gradient to use as their fill color.<\/p>\n<h2><b>SVG Gradients in Styled Mode<\/b><\/h2>\n<p>Normally, to apply a gradient to chart elements, you would define it using Highcharts\u2019 <code>linearGradient<\/code> or <code>radialGradient<\/code> object and assign it to the color property of the chart element you want to fill. But since we\u2019re using <code>styledMode<\/code>, chart configuration styles no longer apply, and we must style everything using CSS.<\/p>\n<p>However, there\u2019s a\u00a0 problem with this approach. SVG does not support CSS\u2019s gradient capabilities. So I need to define my gradient as SVG code and then reference it in my CSS via its ID property.<\/p>\n<p>To do this, I\u2019ll define an SVG gradient in my chart configuration inside a <code>defs<\/code> object.<\/p>\n<pre>defs: {\r\n    gradient0: {\r\n        tagName: 'linearGradient',\r\n        id: 'sunbeam',\r\n        x1: 0,\r\n        y1: 0,\r\n        x2: 0,\r\n        y2: 1,\r\n        children: [{\r\n                tagName: 'stop',\r\n                offset: 0\r\n            },\r\n            {\r\n                tagName: 'stop',\r\n                offset: 0.6\r\n            },\r\n            {\r\n                tagName: 'stop',\r\n                offset: 1\r\n            }\r\n        ]\r\n    }\r\n}\r\n<\/pre>\n<p>This code creates a <code>linearGradient<\/code> element with an id of \u201csunbeam\u201d that has three nested stop elements with various offsets.<\/p>\n<p>Then in my CSS, I\u2019ll define styles for my stops.<\/p>\n<pre>#sunbeam stop {\r\n    stop-color: #fce5af;\r\n}\r\n\r\n#sunbeam stop[offset=\"0\"] {\r\n    stop-opacity: 1;\r\n}\r\n\r\n#sunbeam stop[offset=\"0.6\"] {\r\n    stop-opacity: 0.6;\r\n}\r\n\r\n#sunbeam stop[offset=\"1\"] {\r\n    stop-opacity: 0;\r\n}\r\n<\/pre>\n<p>Finally, to introduce some atmospheric perspective, I\u2019ll apply a subtle CSS blur filter to the darker trees and the sandy bottom. Here is the result:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" title=\"Subtle CSS blur applied to the background elements to create atmospheric perspective\" src=\"https:\/\/codepen.io\/nasin\/embed\/yLrLdVN?default-tab=result&amp;theme-id=light\" height=\"700\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/nasin\/pen\/yLrLdVN\"><br \/>\nJellypus 12<\/a> by Nancy Dillon (<a href=\"https:\/\/codepen.io\/nasin\">@nasin<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>In this article, we used <code>styledMode<\/code> and CSS to transform our area spline range series into an underwater forest. We also learned how to define an SVG gradient in our chart configuration using the <code>defs<\/code> object and apply it to our five lines series to create ethereal sunbeams.<\/p>\n<p>In the next tutorial, we will summon the Jellypus and add it to the scene.<\/p>\n<p>&nbsp;<\/p>\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\/post\/stock-chart-examples-using-highcharts-stock\/\">Stock chart examples using Highcharts Stock<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/stock-charting-with-highcharts\/\">Stock charting with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/post\/intraday-chart-examples-using-highcharts\/\">Intraday chart examples using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/inspirations\/financial-charts-with-highcharts\/\">Financial charts with Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/real-time-data-visualization-using-highcharts\/\">Real-time data visualization using Highcharts<\/a><\/li>\n<li style=\"margin-left: 20px; margin-bottom: 20px;\"><a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/big-data-visualization-using-highcharts\/\">Big data visualization using Highcharts<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to us styledMode and CSS to customize Highcharts.<\/p>\n","protected":false},"author":250,"featured_media":24841,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1063,1094],"coauthors":[786],"class_list":["post-24800","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-visualization","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24800","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\/250"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=24800"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24800\/revisions"}],"predecessor-version":[{"id":26030,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24800\/revisions\/26030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24841"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24800"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}