albertsikkema
Posts: 6
Joined: Wed Oct 17, 2012 1:24 pm

responsive charts using css media queries

Hi,

I'm trying to make my chart behave differently on different screen sizes using responsive css media queries. Resizing and all works, just using css. However I'd also like to make the font sizes on the axis' smaller/larger depending on the screen size. The only way I see to set the font-size(style) is using javascript. Is there any way to assign a css class to the axis style setting so that it automatically adjusts?

ie, something like:

Code: Select all

yAxix: {
    labels: {
        styleClass: '.mysAxisStyle'
    }
}
A workaround would be to check for screen width using javascript and change to chart dynamically, but it would be very nice if there would be a way to apply css for this as well. Keeping these settings in css would seem like a nicer design (and make it easier to style for a designer).

Thanks,
Albert
seba
Posts: 4415
Joined: Tue Jul 31, 2012 2:26 pm

Re: responsive charts using css media queries

You can set useHTML as true for title and then use css styles.

http://jsfiddle.net/3t98X/
Sebastian Bochan
Highcharts Developer
mssarul
Posts: 2
Joined: Tue Sep 15, 2015 2:35 am

Re: responsive donut chart cutoff text and spacing to data

In Donut Highcharts to pass 4 data. In chart label one text length is high so I <br/> (break tag) to cut off text to display it will work but it will affect another text(next data) i.e. text overlay
Attachments
chart.jpeg
chart.jpeg (90.5 KiB) Viewed 4376 times
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: responsive charts using css media queries

This is a known issue about multiple text-shadows leaving duplicated elements: https://github.com/highslide-software/h ... ssues/3649

Workaround - set single textShadow.
Example: http://jsfiddle.net/72excqLp/
Kacper Madej
Highcharts Developer
mssarul
Posts: 2
Joined: Tue Sep 15, 2015 2:35 am

Donut chart to break text have problem

In donut chart break text have problem.Below link have the example
Befor break text to use : http://jsfiddle.net/kdms0hho/


After Add <br/> add:
http://jsfiddle.net/kdms0hho/2/
Attachments
Before &lt;br/&gt; text
Before <br/> text
3.jpg (39.77 KiB) Viewed 4303 times
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: responsive charts using css media queries

It is possible to increase padding for dataLabels.
API: http://api.highcharts.com/highcharts#se ... ls.padding
Example: http://jsfiddle.net/kdms0hho/3/
Kacper Madej
Highcharts Developer
bubble-cord
Posts: 8
Joined: Fri Apr 12, 2019 11:30 am

Re: responsive charts using css media queries

@albert I am trying to achieve the same; setting responsiveness for the charts on different screen sizes. But not able to figure it out for highcharts. Can you please help me out with the same?
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: responsive charts using css media queries

Hey bubble-cord!

Have you already checked responsive feature?

API: https://api.highcharts.com/highcharts/responsive

I encourage to scrape through documentation and demos. It this wouldn't help, please prepare a demo with your project and describe what you want to achieve.

Kind regards!
Sebastian Wędzel,
Highcharts Developer
green-mountain-tech
Posts: 10
Joined: Tue Mar 30, 2021 7:23 pm

Re: responsive charts using css media queries

I was having trouble with the way listed in the documentation + in the thread, but I found a solution which also works with a smidge less work. You can create a media query in a css/scss file and target the element in the chart you want to style (say .highcharts-title; you can see them in Chrome DevTools) and then add the !important modifier. It's not super air tight (i don't like using !important) but it works and it's pretty straight forward.

Code: Select all

$breakpoint-tablet: 2000px;
@media screen and (min-width: $breakpoint-tablet) {
	.highcharts-title{
		font-size: 30px !important;
	}
}
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: responsive charts using css media queries

Hi green-mountain-tech,

Thanks a lot for sharing your solution! Using css and media queries to add some custom styling comes in really handy in many situations and is a great alternative to Highcharts responsive rules. I'm sure this will be helpful for many users.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”