{"id":9480,"date":"2016-07-07T13:12:35","date_gmt":"2016-07-07T11:12:35","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=9480"},"modified":"2026-01-12T09:02:05","modified_gmt":"2026-01-12T09:02:05","slug":"218-css-styling-javascript-charts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/218-css-styling-javascript-charts\/","title":{"rendered":"Designers rejoice: CSS Styling for JavaScript charts"},"content":{"rendered":"<p>You no longer need to be a developer to style interactive charts. With Highcharts 5, charts can be <a href=\"https:\/\/www.highcharts.com\/docs\/chart-design-and-style\/style-by-css\">styled with CSS<\/a> (or any CSS preprocessor). If you\u2019re a web designer and\/or think like me, then separating structure and design is a much more familiar approach than cluttering HTML or JavaScript with design. In this post, I\u2019ll be using CodePen for examples, so please feel free to mess around with them, and make your own forks.<\/p>\n<p>By using the styled mode introduced in Highcharts 5, \u00a0all styling is left in the hands of CSS. It\u2019s important to note that when I say CSS styling, I mean styling in the most literal sense. Positioning and size properties cannot be altered through CSS, because Highcharts uses SVG to render charts. However, there are some simple tricks to control positioning and size as well that even designers can master in a few minutes, which we will touch on in a subsequent post.<\/p>\n<h2>STYLING SVG<\/h2>\n<p>Higcharts renders graphs using a W3C standard markup language called SVG (Scalable Vector Graphics), which all modern browsers handles beautifully. If you\u2019re somewhat unfamiliar with SVG, let me assure you: It\u2019s not that different from HTML. In fact, both HTML and SVG is based on XML, and SVG images can be marked up directly into HTML with the <code>&lt;svg&gt;<\/code> tag. The syntax is therefore exactly the same as HTML, but with different tag names and properties:<\/p>\n<p><img decoding=\"async\" title=\"Highcharts SVG in Firefox Inspector\" src=\"https:\/\/highsoftpictures.s3.amazonaws.com\/image00.png\" alt=\"Highcharts SVG in Firefox Inspector\" border=\"0\" \/><\/p>\n<p>Try it out with your browser\u2019s page inspector, like the Firefox Inspector. It\u2019s basically HTML (I mean, it\u2019s not, but you get the point), but with different properties like \u2018fill\u2019 instead of \u2018background\u2019. Here\u2019s another example:<\/p>\n<p class=\"codepen\" data-height=\"300\" data-theme-id=\"0\" data-slug-hash=\"beqzRE\" data-default-tab=\"html,result\" data-user=\"larsac07\" data-embed-version=\"2\">See the Pen <a href=\"https:\/\/codepen.io\/larsac07\/pen\/beqzRE\/\">SVG Example<\/a> by Lars Cabrera (<a href=\"http:\/\/codepen.io\/larsac07\">@larsac07<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script type=\"text\/javascript\" src=\"https:\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Here the attributes <code>fill<\/code>, <code>stroke-width<\/code> and <code>stroke<\/code> are used to style the fill color and stroke. In CSS, that can be expressed like this:<\/p>\n<p class=\"codepen\" data-height=\"300\" data-theme-id=\"0\" data-slug-hash=\"VjpgyN\" data-default-tab=\"css,result\" data-user=\"larsac07\" data-embed-version=\"2\">See the Pen <a href=\"http:\/\/codepen.io\/larsac07\/pen\/VjpgyN\/\">SVG Example &#8211; with CSS<\/a> by Lars Cabrera (<a href=\"http:\/\/codepen.io\/larsac07\">@larsac07<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>STYLING HIGHCHARTS<\/h2>\n<p>Styling charts with CSS works the same way, and HC5 makes that easier by creating helpful classes to elements, such as <code>.highcharts-data-label<\/code> for data labels, <code>.highcharts-point<\/code> for each data point and <code>.highcharts-point-select<\/code> for the points which are currently selected. Below is an example which imports the default styling from <a href=\"https:\/\/code.highcharts.com\/5\/css\/highcharts.css\">highcharts.css<\/a>, and overrides the design for selected points:<\/p>\n<p class=\"codepen\" data-height=\"480\" data-theme-id=\"0\" data-slug-hash=\"JKWVJW\" data-default-tab=\"css,result\" data-user=\"larsac07\" data-embed-version=\"2\">See the Pen <a href=\"http:\/\/codepen.io\/larsac07\/pen\/JKWVJW\/\">Highcharts CSS Example<\/a> by Lars Cabrera (<a href=\"http:\/\/codepen.io\/larsac07\">@larsac07<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>CREATE THEMES<\/h2>\n<p>You can also create a completely blank CSS for charts, which can be especially interesting for creating CSS themes and templates, by simply not importing the default styling file. Below is a rough adaptation of the Dark Unica theme in CSS, which is based on editing the default styling:<\/p>\n<p class=\"codepen\" data-height=\"480\" data-theme-id=\"0\" data-slug-hash=\"GqWaBg\" data-default-tab=\"css,result\" data-user=\"larsac07\" data-embed-version=\"2\">See the Pen <a href=\"http:\/\/codepen.io\/larsac07\/pen\/GqWaBg\/\">Highcharts CSS Example without default style<\/a> by Lars Cabrera (<a href=\"http:\/\/codepen.io\/larsac07\">@larsac07<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p>In fact, if you supply no CSS at all, the chart will be rendered as a black box, which is the default styling for SVG elements:<\/p>\n<p class=\"codepen\" data-height=\"480\" data-theme-id=\"0\" data-slug-hash=\"dXvBOo\" data-default-tab=\"css,result\" data-user=\"larsac07\" data-embed-version=\"2\">See the Pen <a href=\"https:\/\/codepen.io\/larsac07\/pen\/dXvBOo\/\">Highcharts CSS without styling<\/a> by Lars Cabrera (<a href=\"http:\/\/codepen.io\/larsac07\">@larsac07<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2>SUMMARY<\/h2>\n<p>Whether you want to change a small detail in a single chart, or you wish to create a custom theme for all charts, Highcharts is going to make that easier for web designers and anyone with a little love for styling with CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It used to be that you would have to be a developer to configure the look and feel of interactive JavaScript charts. Not anymore.<\/p>\n","protected":false},"author":44,"featured_media":10586,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,1031],"coauthors":[732],"class_list":["post-9480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9480","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\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=9480"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9480\/revisions"}],"predecessor-version":[{"id":29068,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/9480\/revisions\/29068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/10586"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=9480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=9480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=9480"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=9480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}