CODEWITHSUNDEEP
javascriptcsswidthmedia-queriesdc.js
user3567857
user3567857

Reputation: 183

how to set width of piechart in dc.js through css

I want to set width of piechart of dc.js different for different resolution; for that I want to set width of piechart through css so that I can apply mediaqueries for different resolution. Please provide me solution for setting width of piechart of dc.js through css.

icd9Pie /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
        // (_optional_) define chart width, `default = 200`

          .width(180) // (optional) define chart height, `default = 200`
          .height(160)

        // Define pie radius
        .radius(80)
        // Set dimension
        .dimension(icd9Dimension)
        // Set group
        .group(icd9Group)
        // (_optional_) by default pie chart will use `group.key` as

        // its label but you can overwrite it with a closure.
        .label(function(d) {
            return d.key;
        }).renderLabel(true)
        /

//new code

 icd9Pie /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
        // (_optional_) define chart width, `default = 200`

          .minWidth(180) // (optional) define chart height, `default = 200`
          .minHeight(160)

        // Define pie radius
        .radius(80)
        // Set dimension
        .dimension(icd9Dimension)
        // Set group
        .group(icd9Group)
        // (_optional_) by default pie chart will use `group.key` as

        // its label but you can overwrite it with a closure.
        .label(function(d) {
            return d.key;
        }).renderLabel(true)
        /

Upvotes: 1

Views: 679

Answers (1)

Gordon
Gordon

Reputation: 20120

I think you may be just running into the minimum sizing parameters there, minWidth and minHeight - by default they are 200.

Docs for minWidth and minHeight

The media query didn't work as you specified it above, I had to add braces. This totally worked for me:

@media (max-width: 1280px) {
  #test { width: 180px !important; height: 160px !important; }
}

And set minWidth and minHeight in order to allow them to go lower than 200:

chart.minWidth(100)
   .minHeight(100)

Upvotes: 1

Related Questions