djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Change colors and size of labels

Hi

At bottom of the plot, there is a label with some text that reflects the dataset.

How can we :

1. Increase the size of the text?
2. Increase the size of the line symbol "--"?
3. Can it be possible that we can also add two rows for the data labels instead of all being in one long row?
highchartstock.jpg
highchartstock.jpg (119.33 KiB) Viewed 739 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change colors and size of labels

Hi djoshi,

Thanks for contacting us with your question.

1) Font size can be increased with legend.itemStyle property:
https://api.highcharts.com/highcharts/legend.itemStyle

2) Size of line symbol can be increased with symbolWidth property:
https://api.highcharts.com/highcharts/l ... ymbolWidth

3) To have two rows of items instead of one horizontal, you can set vertical legend layout:
https://api.highcharts.com/highcharts/legend.layout

Demo: https://jsfiddle.net/BlackLabel/ktxr8bwe/

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Change colors and size of labels

This is my plot so far
PlotA.jpg
PlotA.jpg (79.71 KiB) Viewed 715 times
How do we thicken the line next to the trend names at the bottom of the plot?

Can it be possible to also display the data so its?

U1, V1 , W1
U2, V2, W2


Instead of U1, V1 , W1,U2, V2, W2
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change colors and size of labels

Hi djoshi,

Line in legend symbol can be thickened with CSS:

Code: Select all

.highcharts-graph {
  stroke-width: 5
}
When it comes to legend layout, you should use legend.with property to limit legend width and thus force it to span in two rows.
Demo:https://jsfiddle.net/BlackLabel/rn6hudk8/
API reference: https://api.highcharts.com/highcharts/legend.width

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Change colors and size of labels

Thanks

I manage to do this using the followin, by adding lineWidth to the series[]

Code: Select all


        series: [
          {
         {
            boostThreshold: 1,
            color: '#FCB711',
            name: this.series_title_a,
            type: 'spline',
            data: this.datasets[0].data,
            showInNavigator: true,
            lineWidth:5

          },
          ]
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change colors and size of labels

djoshi,

Yes, that is a correct alternative.

Feel free to ask any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”