{"id":5249,"date":"2017-12-13T05:39:52","date_gmt":"2017-12-13T05:39:52","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=5249"},"modified":"2018-09-19T09:13:52","modified_gmt":"2018-09-19T09:13:52","slug":"conditional-custom-drawing-lines-javascript-charts","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/","title":{"rendered":"Conditional Custom Drawing in JavaScript Charts \u2014 Challenge AnyChart!"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5273\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg\" alt=\"Conditional Custom Drawing in JavaScript Charts \u2014 Challenge AnyChart!\" width=\"100%\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg 2000w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing-300x177.jpg 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing-768x454.jpg 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing-1024x605.jpg 1024w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/>The time has come for a new <a href=\"https:\/\/www.anychart.com\/blog\/category\/challenge-anychart\/\">Challenge AnyChart!<\/a>\u00a0article! We continue to receive interesting data visualization tasks from our wonderful customers and are happy to share with our blog readers how to solve some of the most inspiring ones with the help of our <a href=\"https:\/\/www.anychart.com\">JavaScript charting libraries<\/a>.<\/p>\n<p>In today\u2019s tutorial, let\u2019s dig into custom drawing and create an interactive HTML5 line chart of which the segments with negative values are painted with a different color than the rest of the graph.<\/p>\n<p><!--more--><\/p>\n<h2>Data Visualization Task<\/h2>\n<p>To be more precise, we\u2019ll look into the following situation as requested by one of our customers.<\/p>\n<blockquote><p><em><strong>Here\u2019s the kind of Line Chart we need: When the data goes to negative values, the color of the line must change to red and the crossing point between the graph and the X-axis must feature a timestamp displayed. Is it possible to do it in AnyChart JS Charts?<br \/>\n<\/strong><\/em><\/p><\/blockquote>\n<p>Below is the picture that the customer attached to illustrate the data visualization task and show us what chart exactly was needed:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-5250\" src=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/11\/image001.png\" alt=\"We'll use custom drawing to create such an interactive JavaScript (HTML5) line chart where negative value segments feature a different color than the rest\" width=\"100%\" height=\"203\" srcset=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/11\/image001.png 1070w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/11\/image001-300x57.png 300w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/11\/image001-768x146.png 768w, https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/11\/image001-1024x194.png 1024w\" sizes=\"(max-width: 1070px) 100vw, 1070px\" \/><\/p>\n<p>To\u00a0create a data visualization solution according to this task, we need to use the following:<\/p>\n<ul>\n<li>the\u00a0<a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Custom_Drawing\" target=\"_blank\" rel=\"nofollow\">Custom Drawing<\/a> feature of the <a href=\"https:\/\/www.anychart.com\/products\/anychart\/overview\/\">AnyChart JavaScript charting library<\/a>;<\/li>\n<li>the axis marker line (for the zero line);<\/li>\n<li>a few mathematical calculations.<\/li>\n<\/ul>\n<h2>Solution Overview<\/h2>\n<p>To display a chart like this we need to change the function that is responsible for drawing a line in <a href=\"https:\/\/www.anychart.com\/chartopedia\/chart-types\/line-chart\/\">Line Charts<\/a>.<\/p>\n<p>We need to get two sets of line segments, one with all the points above zero and the other with all the points with negative values. Each line segment will be connected with others from the same set or with an additional point on the zero line.<\/p>\n<p>Basic math will help us create a set of additional points &#8211; intersections between the series line and the zero line (a set of X values where Y equals 0).<\/p>\n<h2>Custom Drawing<\/h2>\n<p>You can learn about the customization of the series drawing functions in\u00a0the <a href=\"https:\/\/docs.anychart.com\/Basic_Charts\/Custom_Drawing\" target=\"_blank\" rel=\"nofollow\">dedicated section of our chart documentation<\/a>.<\/p>\n<p>The custom drawing function works with point coordinates and 0 on the Y-axis for the current point. This means we only need to calculate X and draw line segments each of which will be colored according to its value.<\/p>\n<pre><code class=\"javascript\">var zeroX = (this.zero - context.prevY) \/ (this.value - context.prevY) * (this.x - context.prevX) + context.prevX;<\/code><\/pre>\n<h2>Different Colors<\/h2>\n<p>Each series has methods that can&#8217;t be used. For example, a simple line series uses the <strong>stroke()<\/strong> method but it doesn\u2019t use <strong>lowStroke()<\/strong>.<\/p>\n<p>Let\u2019s use <strong>lowStroke()<\/strong> to set the color for the negative part of the chart.<\/p>\n<pre><code class=\"javascript\">series.lowStroke('red');<\/code><\/pre>\n<p>Then, when creating a custom shape, we will specify that the color for negative segments comes from the value set with the <strong>lowStroke<\/strong>.<\/p>\n<pre><code class=\"javascript\">strokeName: 'lowStroke',<\/code><\/pre>\n<p>Here\u2019s the result we\u2019ve got:<\/p>\n<p class='codepen'  data-height='365' data-theme-id='0' data-slug-hash='gXZovG' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Series Conditional Draw by Vitaly (@Radionov) on CodePen.<\/p>\n\n<p>Check out the full code of the chart:<\/p>\n<pre><code class=\"javascript\">anychart.onDocumentReady(function () {\r\n\r\n    \/\/ create data\r\n    var data = [\r\n        {x: Date.UTC(2014, 5, 6, 1, 15, 0), value: -10},\r\n        {x: Date.UTC(2014, 5, 6, 6, 30, 0), value: 15},\r\n        {x: Date.UTC(2014, 5, 6, 12, 45, 0), value: 5},\r\n        {x: Date.UTC(2014, 5, 6, 19, 20, 0), value: 45},\r\n        {x: Date.UTC(2014, 5, 6, 22, 0, 0), value: 25},\r\n        {x: Date.UTC(2014, 5, 7, 2, 5, 0), value: -12},\r\n        {x: Date.UTC(2014, 5, 7, 7, 25, 0), value: -13},\r\n        {x: Date.UTC(2014, 5, 7, 13, 45, 0), value: 4},\r\n        {x: Date.UTC(2014, 5, 7, 20, 5, 0), value: 43},\r\n        {x: Date.UTC(2014, 5, 7, 23, 15, 0), value: 23},\r\n        {x: Date.UTC(2014, 5, 8, 2, 5, 0), value: -20}\r\n    ];\r\n\r\n    \/\/ create a chart\r\n    var chart = anychart.line();\r\n\r\n    \/\/set the DateTime type of scale\r\n    chart.xScale(anychart.scales.dateTime());\r\n\r\n    \/\/set the zero line by yAxis\r\n    var zeroLine = chart.lineMarker();\r\n    zeroLine.value(0);\r\n    zeroLine.stroke(\"2 grey\");\r\n\r\n    \/\/ create a spline series and set the data\r\n    var series = chart.line(data);\r\n\r\n    \/\/ point settings\r\n    setupDrawer(series, chart);\r\n    \/\/ set the red stroke for line segments below the zero line\r\n    series.normal().lowStroke('red');\r\n\r\n    \/\/ tooltip settings\r\n    chart.tooltip({\r\n        titleFormat: function () {\r\n            return anychart.format.dateTime(this.x, \"dd MMMM HH:mm\");\r\n        },\r\n        format: \"Value: {%Value}\"\r\n    });\r\n\r\n    chart.container('container');\r\n    chart.draw();\r\n\r\n    \/**\r\n     * Custom series drawing function\r\n     * @param series - current series\r\n     * @param chart - current chart\r\n     *\/\r\n    function setupDrawer(series, chart) {\r\n        var xAxis = chart.xAxis();\r\n\r\n        \/\/ array for standalone labels and counter\r\n        var zeroLabels = [];\r\n\r\n        \/\/ remove old current labels when resizing the container\r\n        window.onresize = function () {\r\n            var label;\r\n            while (label = zeroLabels.pop()) label.dispose();\r\n        };\r\n\r\n        \/\/ add the second shape for the line path below the zero line\r\n        var tmp = series.rendering().shapes();\r\n        tmp.push({\r\n            name: 'negative',\r\n            shapeType: 'path',\r\n            fillName: null,\r\n            strokeName: 'lowStroke',\r\n            isHatchFill: false,\r\n            zIndex: 1\r\n        });\r\n\r\n        \/\/ create a context for how each point will be drawn\r\n        var context = {\r\n            series: series,\r\n            prevPointDrawn: false,\r\n            prevWasNegative: false,\r\n            prevX: null,\r\n            prevY: null\r\n        };\r\n\r\n        var customRenderer = series.rendering();\r\n        customRenderer.needsZero(true);\r\n        customRenderer.shapes(tmp);\r\n        customRenderer.start(function () {\r\n            context.prevPointDrawn = false;\r\n        });\r\n        var customPointDrawer = function () {\r\n            if (this.missing) {\r\n                context.prevPointDrawn = context.prevPointDrawn && context.series.connectMissing();\r\n            } else {\r\n                \/\/ get a shape depending on a point's state\r\n                var shapes = this.getShapesGroup(this.seriesState);\r\n                \/\/ set what point is negative\r\n                var isNegative = this.getDataValue('value') < 0;\r\n                \/\/ determine the path of the current point to continue drawing\r\n                var currPath = isNegative ? shapes['negative'] : shapes['stroke'];\r\n                if (context.prevPointDrawn) {\r\n                    \/\/ enter only if the plus-minus nature has changed\r\n                    if (isNegative != context.prevWasNegative) {\r\n                        \/\/ determine the path of the previous point to continue drawing\r\n                        var prevPath = context.prevWasNegative ? shapes['negative'] : shapes['stroke'];\r\n                        \/\/ determine the position of 0 (by X)\r\n                        var zeroX = (this.zero - context.prevY) \/ (this.value - context.prevY) * (this.x - context.prevX) + context.prevX;\r\n                        \/\/ draw the previous point from zero\r\n                        prevPath.lineTo(zeroX, this.zero);\r\n                        \/\/ draw the current point from zero\r\n                        currPath.moveTo(zeroX, this.zero);\r\n\r\n                        var localCoordinates = chart.globalToLocal(zeroX, this.zero);\r\n                        var ratio = (localCoordinates.x - xAxis.getPixelBounds().left ) \/ xAxis.getPixelBounds().width;\r\n                        var time = chart.xScale().inverseTransform(ratio);\r\n\r\n                        \/\/ draw a label for the crossing between the series line and the zero line\r\n                        var zeroLbl = anychart.standalones.label();\r\n                        zeroLbl.text(anychart.format.dateTime(time, \"HH:mm\"));\r\n                        zeroLbl.offsetX(zeroX);\r\n                        zeroLbl.offsetY(this.zero);\r\n                        zeroLbl.container(chart.container());\r\n                        zeroLbl.draw();\r\n                        zeroLabels.push(zeroLbl);\r\n                    }\r\n                    currPath.lineTo(this.x, this.value);\r\n                } else {\r\n                    \/\/ draw the very first point\r\n                    currPath.moveTo(this.x, this.value);\r\n                }\r\n                context.prevX = this.x;\r\n                context.prevY = this.value;\r\n                context.prevWasNegative = isNegative;\r\n                context.prevPointDrawn = true;\r\n            }\r\n        };\r\n        customRenderer.point(customPointDrawer);\r\n    }\r\n});\r\n<\/code><\/pre>\n<hr \/>\n<p>Have a sophisticated data visualization task? Not sure how to deal with it best or whether it is actually solvable with <a href=\"https:\/\/www.anychart.com\">AnyChart JS Charts<\/a>? Simply email us all the relevant details at <a href=\"mailto:support@anychart.com\" target=\"_blank\" rel=\"nofollow\">support@anychart.com<\/a> with \"<em>Challenge<\/em>\" in the subject line. Our <a href=\"https:\/\/www.anychart.com\/support\/\">Support Team<\/a> will be happy to help you asap and we might even decide to make a tutorial based on your question and share it in one of the next articles!<\/p>\n<p>Indeed, AnyChart can help you cope with any, even complicated and extraordinary data visualization tasks and any custom drawing. We'll continue the <a href=\"https:\/\/www.anychart.com\/blog\/category\/challenge-anychart\/\">Challenge AnyChart!<\/a> series on our blog to show you how.<\/p>\n<p><!-- SyntaxHighlighter --><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/default.min.css\"><link rel=\"stylesheet\" href=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/styles\/atom-one-light.min.css\"><script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/9.12.0\/highlight.min.js\"><\/script><script>hljs.initHighlightingOnLoad();<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>The time has come for a new Challenge AnyChart!\u00a0article! We continue to receive interesting data visualization tasks from our wonderful customers and are happy to share with our blog readers how to solve some of the most inspiring ones with the help of our JavaScript charting libraries. In today\u2019s tutorial, let\u2019s dig into custom drawing [&hellip;]<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,280,22,23,13,4],"tags":[53,281,258,44,292,156,54,32,55,144,36,141,81,57,58,65,56,30,172],"class_list":["post-5249","post","type-post","status-publish","format-standard","hentry","category-anychart-charting-component","category-challenge-anychart","category-charts-and-art","category-html5","category-javascript","category-tips-and-tricks","tag-anychart","tag-challenge","tag-charts","tag-charts-and-art","tag-custom-drawing","tag-customizability","tag-data-visualization","tag-html5","tag-html5-charts","tag-infographics","tag-javascript","tag-javascript-charting","tag-javascript-charting-library","tag-javascript-charts","tag-js-chart","tag-js-charting","tag-js-charts","tag-tips-and-tricks","tag-tutorial","wpautop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Conditional Custom Drawing of Lines in JavaScript Charts \u2014 Challenge AnyChart!<\/title>\n<meta name=\"description\" content=\"Let\u2019s dig into custom drawing to create an interactive JavaScript (HTML5) line chart where negative value segments feature a different color than the rest.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Conditional Custom Drawing of Lines in JavaScript Charts \u2014 Challenge AnyChart!\" \/>\n<meta property=\"og:description\" content=\"Let\u2019s dig into custom drawing to create an interactive JavaScript (HTML5) line chart where negative value segments feature a different color than the rest.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"AnyChart News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AnyCharts\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-13T05:39:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-09-19T09:13:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1182\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vitaly Radionov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:site\" content=\"@AnyChart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vitaly Radionov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/\"},\"author\":{\"name\":\"Vitaly Radionov\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df\"},\"headline\":\"Conditional Custom Drawing in JavaScript Charts \u2014 Challenge AnyChart!\",\"datePublished\":\"2017-12-13T05:39:52+00:00\",\"dateModified\":\"2018-09-19T09:13:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/\"},\"wordCount\":595,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg\",\"keywords\":[\"AnyChart\",\"challenge\",\"charts\",\"Charts and Art\",\"custom drawing\",\"Customizability\",\"Data Visualization\",\"HTML5\",\"html5 charts\",\"infographics\",\"JavaScript\",\"javascript charting\",\"JavaScript charting library\",\"javascript charts\",\"js chart\",\"js charting\",\"js charts\",\"Tips and tricks\",\"tutorial\"],\"articleSection\":[\"AnyChart Charting Component\",\"Challenge AnyChart!\",\"Charts and Art\",\"HTML5\",\"JavaScript\",\"Tips and Tricks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/\",\"url\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/\",\"name\":\"Conditional Custom Drawing of Lines in JavaScript Charts \u2014 Challenge AnyChart!\",\"isPartOf\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg\",\"datePublished\":\"2017-12-13T05:39:52+00:00\",\"dateModified\":\"2018-09-19T09:13:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df\"},\"description\":\"Let\u2019s dig into custom drawing to create an interactive JavaScript (HTML5) line chart where negative value segments feature a different color than the rest.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#primaryimage\",\"url\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg\",\"contentUrl\":\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg\",\"width\":2000,\"height\":1182},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.anychart.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conditional Custom Drawing in JavaScript Charts \u2014 Challenge AnyChart!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#website\",\"url\":\"https:\/\/www.anychart.com\/blog\/\",\"name\":\"AnyChart News\",\"description\":\"AnyChart JS Charts\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.anychart.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df\",\"name\":\"Vitaly Radionov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g\",\"caption\":\"Vitaly Radionov\"},\"url\":\"https:\/\/www.anychart.com\/blog\/author\/vitaly-radionov\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Conditional Custom Drawing of Lines in JavaScript Charts \u2014 Challenge AnyChart!","description":"Let\u2019s dig into custom drawing to create an interactive JavaScript (HTML5) line chart where negative value segments feature a different color than the rest.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/","og_locale":"en_US","og_type":"article","og_title":"Conditional Custom Drawing of Lines in JavaScript Charts \u2014 Challenge AnyChart!","og_description":"Let\u2019s dig into custom drawing to create an interactive JavaScript (HTML5) line chart where negative value segments feature a different color than the rest.","og_url":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/","og_site_name":"AnyChart News","article_publisher":"https:\/\/www.facebook.com\/AnyCharts","article_published_time":"2017-12-13T05:39:52+00:00","article_modified_time":"2018-09-19T09:13:52+00:00","og_image":[{"width":2000,"height":1182,"url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg","type":"image\/jpeg"}],"author":"Vitaly Radionov","twitter_card":"summary_large_image","twitter_creator":"@AnyChart","twitter_site":"@AnyChart","twitter_misc":{"Written by":"Vitaly Radionov","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#article","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/"},"author":{"name":"Vitaly Radionov","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df"},"headline":"Conditional Custom Drawing in JavaScript Charts \u2014 Challenge AnyChart!","datePublished":"2017-12-13T05:39:52+00:00","dateModified":"2018-09-19T09:13:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/"},"wordCount":595,"commentCount":0,"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg","keywords":["AnyChart","challenge","charts","Charts and Art","custom drawing","Customizability","Data Visualization","HTML5","html5 charts","infographics","JavaScript","javascript charting","JavaScript charting library","javascript charts","js chart","js charting","js charts","Tips and tricks","tutorial"],"articleSection":["AnyChart Charting Component","Challenge AnyChart!","Charts and Art","HTML5","JavaScript","Tips and Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/","url":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/","name":"Conditional Custom Drawing of Lines in JavaScript Charts \u2014 Challenge AnyChart!","isPartOf":{"@id":"https:\/\/www.anychart.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg","datePublished":"2017-12-13T05:39:52+00:00","dateModified":"2018-09-19T09:13:52+00:00","author":{"@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df"},"description":"Let\u2019s dig into custom drawing to create an interactive JavaScript (HTML5) line chart where negative value segments feature a different color than the rest.","breadcrumb":{"@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#primaryimage","url":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg","contentUrl":"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2017\/12\/custom-drawing.jpg","width":2000,"height":1182},{"@type":"BreadcrumbList","@id":"https:\/\/www.anychart.com\/blog\/2017\/12\/13\/conditional-custom-drawing-lines-javascript-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.anychart.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Conditional Custom Drawing in JavaScript Charts \u2014 Challenge AnyChart!"}]},{"@type":"WebSite","@id":"https:\/\/www.anychart.com\/blog\/#website","url":"https:\/\/www.anychart.com\/blog\/","name":"AnyChart News","description":"AnyChart JS Charts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.anychart.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/362960fc87fb7587a1705738dbd890df","name":"Vitaly Radionov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.anychart.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/921099926ecb864bc1aad17600bce0e0d09b5f171abcdec9253f148b48f8d7ac?s=96&r=g","caption":"Vitaly Radionov"},"url":"https:\/\/www.anychart.com\/blog\/author\/vitaly-radionov\/"}]}},"_links":{"self":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/5249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/comments?post=5249"}],"version-history":[{"count":21,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/5249\/revisions"}],"predecessor-version":[{"id":6564,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/posts\/5249\/revisions\/6564"}],"wp:attachment":[{"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/media?parent=5249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/categories?post=5249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anychart.com\/blog\/wp-json\/wp\/v2\/tags?post=5249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}