Giter Club home page Giter Club logo

Comments (4)

Jooseppi12 avatar Jooseppi12 commented on June 25, 2024

Hey @bwong199!

Indeed this seems like an issue with the binding, will do a fix for this soon.

In the meantime, you can use the following as a workaround:

Instead of:

legendConfig.Labels <- [|labelConfig|]

use this:

legendConfig?labels <- labelConfig.

from chartjs.

bwong199 avatar bwong199 commented on June 25, 2024

Hi @Jooseppi12 ,

Thanks for getting back. The legend now shows up but the font label doesn't seem to be changed. All I changed was that line ^^^, were you able to get it to work? Thanks!

from chartjs.

Jooseppi12 avatar Jooseppi12 commented on June 25, 2024

@bwong199 Using the following code:

      let bdColor = [|
            "rgba(255, 99, 132, 1)"
            "rgba(54, 162, 235, 1)"
            "rgba(255, 206, 86, 1)"
            "rgba(75, 192, 192, 1)"
            "rgba(153, 102, 255, 1)"
            "rgba(255, 159, 64, 1)"
        |] 

      let options = Options()
      let plugins = Plugin()
      let legendConfig = LegendConfig()

      let font = Font()
      font.Size <- 30
      font.Family <- "'Helvetica Neue'"
      font.Style <- FontStyle.Italic

      let labelConfig = LabelConfig()
      labelConfig.Font <- font
      labelConfig.Color <- Union1Of2 1
      labelConfig.BoxHeight <- 200
      labelConfig.BoxWidth <- 200
      labelConfig.Padding <- 30
      labelConfig.UsePointStyle <- true

      legendConfig.Display <- true
      legendConfig.Position <- PositionString.Top
      legendConfig.Align <- AlignString.Center
      legendConfig.FullSize <- true
      legendConfig.MaxHeight <- 1000
      legendConfig.MaxWidth <- 1000
      legendConfig?labels <- labelConfig

      plugins.Legend <- legendConfig
      options.Plugins <- plugins

      let lineDataSet = LineChartDataSet()
      lineDataSet.Label <- "# of Votes"
      lineDataSet.Data <- [|12;19;3;5;2;3|]
      lineDataSet.BorderColor <- Union2Of2 bdColor  
      lineDataSet.BorderWidth <- 6

      let lineData = ChartData()
      lineData.Datasets <- [|lineDataSet|]
      lineData.Labels <- [|"red";"blue";"yellow";"green";"purple";"orange"|]

      let linearChart = ChartCreate(lineData, options)
      let linear () = Chart("chartjs", linearChart)
      linear()

(Uses a canvas in the dom with the id of chartjs)
All three settings on the font object were applied to the legend config and changing those values were applied.

If you have a sample project/repo I can take a look at a specific example, but the above worked for me

from chartjs.

Jooseppi12 avatar Jooseppi12 commented on June 25, 2024

7.0.5.406-beta4 Now contains the fix for this available from our feed.

from chartjs.

Related Issues (5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.