modified the css of a graph

Question

I don't understand why my compose graphic.html is so big.

I have placed my highcharts object in a "graphic" div.

    <div class="graphic">
        <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"
        style="height: 150px; width: 900px; "></highcharts-chart>
   </div>

On the css side I have this:

.graphic{
    display: block;
    max-width: 900px;
    max-height: 150px;
}

Except that the result is not there! Do you have an idea why the size of the graphic is not suitable?

Create a reproducible demo so that we can look into the issue. — m4n0, Jul 17 '20 at 08:41
Ok no worries but with which software would you like a demo? — HCP, Jul 17 '20 at 08:44

score 0 · Accepted Answer · answered Jul 17 '20 at 08:50

0

you might have already initialized the options object which you have named chartOptions, there you should have specified the type of chart you want to be rendered.

In that object only you have to specify the height and width of the chart that you want. So your chartOptions should have the following the properties:

chartOptions:any={
 chart: {
  type: 'scatter',
  height: 150,
  width:900
},

}

answered Jul 17 '20 at 08:50

Minal Shah

1,402
1
5
13

Yes, I just realized this solution – HCP Jul 17 '20 at 09:16

score 0 · Answer 2 · answered Jul 17 '20 at 09:06

0

It's always challenging to render High Charts in a Div which is having it's own CSS.

If we want to do that.. we need start applying those styles directly on the chart object itself. Have you seen these below links..

https://www.highcharts.com/forum/viewtopic.php?t=40607

Resize height with Highcharts

You can also read more about this in the official documentation. Reflow - HighCharts

answered Jul 17 '20 at 09:06

Ganesh

5,808
2
21
41

i can't vote (i need reputation) :/ but i accept the answer – HCP Jul 17 '20 at 09:27

modified the css of a graph

2 Answers2