How to override the css of Highchart

Question

I'm spamming a bit with questions about Highchart but look my problem is a headbreaker.

I have this structure in the navigator:

We can see that the height of highcharts-container is 400px and width is 268px, same for highcharts-root, but in my CSS I change these value to reduce the general size of my chart and display them like I want to:

.highcharts-container {
  width: 100%;
  height: 20% !important;
}
.highcharts-root {
  width: 100%;
  height: 20% !important;
}
.highcharts-background {
  width: 100%;
  height: 20% !important;
}
.divChart {
  width: 100%;
  height: 20% !important;
}

But why it doesn't affect the chart ?!?!

[EDIT] I don't understand why the height still 400px look:

When you inspect the element with a developer tool. What is the full selector that is over writing your "!important" css? It might be caused by the previous selector being targeted from an ID which could take preference. — Gezzasa, Jan 26 '17 at 08:49
@J0N3X so look there the height isn't over lined (left part of the picture) — Jerome, Jan 26 '17 at 08:59
That's inline style D: Try make the container smaller. It might calculate it at the code and insert height that fits's to the parent element. — J0N3X, Jan 26 '17 at 09:00
Try targeting it by ID in the css. #highcharts-doe5ny4-54 {height: 20%;} — Gezzasa, Jan 26 '17 at 09:00
Check this. !important might be your only way. The other way is to figure out how that chart extension works. http://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css — J0N3X, Jan 26 '17 at 09:02
@J0N3X so why it doesn't affect it ? despite the height is 7% (we saw it on the right of the picture) — Jerome, Jan 26 '17 at 09:04
@Gezzasa the id change at each refresh it's made dynamically by HighChart — Jerome, Jan 26 '17 at 09:05
Ok I have founded, I need to define them at the creation of the chart (it's not how I wanted but it works) look my answer — Jerome, Jan 26 '17 at 09:07
@Jerome I don't have any experience with HighChart unfortunately and if I continue to try and help I'm afraid I'm going to play a guessing game without being able to test my answers before commenting. But for a last shot at this I can suggest that you try a partial selector. I'm just not sure how these selectors work, if they have preference over others. But here goes. div[id^="highcharts"]{height: 20%;} — Gezzasa, Jan 26 '17 at 09:12
@Gezzasa I have founded, with Highchart I guess you can't modify them with the css file but you need to modify them at the creation of the chart. Thank you for the help — Jerome, Jan 26 '17 at 09:13
It does not work because in the container all elements are svg elements and they have different presentational attributes than html elements. E.g. a rect element width property is a structural attribute, not presentational - so it cannot be set in a css file. — morganfree, Jan 26 '17 at 11:41
@morganfree oh that's a nice explanation thank you ! but I need to admit that Highchart design / css / responsive is pretty bad despite they say : all is did automatically... nothing works — Jerome, Jan 26 '17 at 12:12

J0N3X · Answer 1 · 2017-01-26T08:55:48.097

1

You should make more "clearer" selector. Basically the rule is used, witch has the most accurate selector. So try this for ex:

.x_panel .x_content .row .highcharts-container {
  width: 100%;
  height: 20% !important;
}

That should do the trick. If not, try making it more specific.

EDIT: Example.

Structure of

<div id="mainCont">
  <div class="subCont">
    <div class="content"> COLOR ME </div>
  </div>
</div>

With css:

.content{
color: red;
}

Will color the .content red, but when we add this to the css:

#mainCont .content{
color:blue;
}

Will override the first one, since it has more specific selector.

EDIT2: Here's something for you to read aswell: https://developer.mozilla.org/en/docs/Web/CSS/Specificity

edited Jan 26 '17 at 08:55

answered Jan 26 '17 at 08:50

J0N3X

228
2
14

So it didn't work, and if we add `!important` it can't be override no ? – Jerome Jan 26 '17 at 08:55
!important overrides it, but it should never be used. Can you show me the full console so we can see how specific is that other css – J0N3X Jan 26 '17 at 08:56

score 0 · Accepted Answer · answered Jan 26 '17 at 09:08

0

I needed to define the width + height at the creation of the chart like this:

nameChart = Highcharts.chart(currentContainer.idChartMem, {
          chart: {
            width: '100%',
            height: '7%'
          },

answered Jan 26 '17 at 09:08

Jerome

1,162
2
16
32

How to override the css of Highchart

2 Answers2