Chart Type World, annotation label doesn't support styling.

[jeetendra-choudhary]

I am trying to style the label for annotations of chart type world, the styling in tooltext is possible and I was able to customize it, however when I try to do same it randers all html as string. Surprisingly </br> tag does work on label. below is the sample what I want to achieve

I want to make the font of first line bigger and bold in the label.

[ashok1994]

Hi @jeetendra-choudhary , we are looking into it , can you also post a scale down sample of the code , that ll be great?

[jeetendra-choudhary]

Hi @ashok1994 thank you for prompt response please find below the sample for posted image -

let chartData = {
      type: 'world',
      width: '100%',
      height: '500',
      dataFormat: 'json',
      dataSource:
      {
        "chart":
        {
          "caption": "",
          "subcaption": "",
          "numbersuffix": "",
          "includevalueinlabels": "0",
          "labelsepchar": "",
          "markerBgColor": "#843cf7",
          "markerRadius": "10",
          "labelColor": "#000000",
          "showMarkerLabels": "1",
          "showMarkerLabelsfillcolor": "#0000b3",
          "entityfillhovercolor": "#38b8f2",
          "theme": "fusion"
        },
        "annotations":
        {
          "groups":
            [
              {
                "id": "Av Item",
                "items":
                  [
                    {
                      "id": "cs",
                      "type": "text",
                      "fillcolor": "#0075c2",
                      "label": "Global Total Sales Past 30 Days",
                      "x": "45",
                      "y": "380",
                      "color": "000000",
                      "align": "left"
                    },
                    {
                      "id": "cs",
                      "type": "text",
                      "fillcolor": "#0075c2",
                      "text": this.state.global30,
                      "x": "230",
                      "y": "400",
                      "color": "000000",
                      "align": "right"
                    }
                  ]
              },
            ],
        },
        "markers":
        {
          "items":
            [
              {
                "id": "na",
                "shapeid": "circle",
                "x": "150.14",
                "y": "150.9",
                "label": this.state.na + '<br>' + this.state.nadiff,
                "tooltext": `<table className='table'>
                <thead>
                  <th>State</th>
                  <th>Total Sales</th>
                </thead>
                <tbody>
                  ${this.state.naDrilDown.map(row => {
                  return `<tr key={row.id}>
                              <td component="th" scope="row">
                                  ${row.state}
                              </td>
                              <td>
                                ${this.formatCurrency(row.value)}
                              </td>
                            </tr>`
                  })}
                </tbody>
                </table>`,
                "labelpos": "top"
              }
          ]
      }
   } 

What I want to achieve is "label": '<b>'+this.state.na + '</b><br>' + this.state.nadiff, instead of "label": this.state.na + '<br>' + this.state.nadiff, as you can see <br> works but <b> doesn't. Also it would be nice if i can also color the label by styling it using some basic css i.e '<div text-color="red">'+${this.state.na}+'</div>', if its not too much to ask :)

[ashok1994]

@jeetendra-choudhary , Hi , we are sorry to say that it isn't possible currently, though you can create a support ticket here https://www.fusioncharts.com

[jeetendra-choudhary]

@ashok1994 can you kindly let me know what is not possible? If making the label text bold and increasing font size is not possible or changing the label text color is not possible?

[ashok1994]

@jeetendra-choudhary In tooltip its possible because tooltip is rendered using HTML the labels are svg So just using a <b> tag won’t work We specifically only support the br tag To help users break a text into multiple lines If you want this feature , then it is at product level feature addition, and we have added it to our roadmap and will look into it .

[siawo]

@jeetendra-choudhary To break the label in multiple lines please use {br} instead of
since we support {br} for breaking the line in svg. To change the font size please use markerFontSize in chart object To change the color of label please use markerFontColor in chart object. To change the font-family please use markerFont in chart object. For more information please visit link

[siawo]

@jeetendra-choudhary Please let us know if your problem has been resolved.

[gonyulian415]

@siawo can you kindly let me know how to change font-weight of label in markers？

[AyanBhadury]

@gonyulian415 Please set markerFontSize at the chart object level

[gonyulian415]

@AyanBhadury I set markerFontSize and just font-size is changed...please kindly let me know how to set it ？ p.s. I use a bold-font provided by UI.(i dont think it is a good idea but it works...)

[AyanBhadury]

Since its a product cosmetics query please drop a mail to support@fusioncharts.com with your license details