cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

Time Series Chart X-Axis size and Y-Axis size

leokeinsfeld
13-Aquamarine

Time Series Chart X-Axis size and Y-Axis size

Hi everyone,

 

My environment:

 

ThingWorx 8.5

 

Custom Chart 3.0.3 - Time Series Chart V2

 

Is there any way to change the x-axis size and y-axis size?

 

I have tried looking for Properties and Style Properties but I did not find anything.

 

Line Chart History.JPG

 

Regards,

Leonardo.

 

1 ACCEPTED SOLUTION

Accepted Solutions

@leokeinsfeld 

 

Use custom CSS.  I think these have worked for me before:

 

.nvd3 text{
font-size: 12px;
font-style: normal;
}

.nvd3 .nv-axis .nv-axisMaxMin text{
font-weight: normal;
}

View solution in original post

6 REPLIES 6

Hi, for the X, Y axis size, are you referring to 

1. The font size of the labels, make the 4AM to look bigger

2. The intervel of each label marker, 30-40-50-60 to 30-45-60

3. The outer range size of the chart, like in your other question, the widget is not responsive?

leokeinsfeld
13-Aquamarine
(To:zyuan1)

Hi @zyuan1 

 

I need:

 

1. The font size of the labels, make the 4AM to look bigger

@leokeinsfeld 

 

Use custom CSS.  I think these have worked for me before:

 

.nvd3 text{
font-size: 12px;
font-style: normal;
}

.nvd3 .nv-axis .nv-axisMaxMin text{
font-weight: normal;
}

Hi @nmilleson 

 

It has worked to me.

 

Thank you very much.

 

Regards,

Leonardo

@nmilleson 

 

Do you know if is possible to change the decimal places from Y-axis? 

@leokeinsfeld 

It is possible but you have to modify the actual widget code.

 

In timeSeriesChartV2.runtime.js, there is a line of code:

 

chart.yAxis
.showMaxMin(!!thisWidget.yAxisMinMaxVisible)
.axisLabel(thisWidget.showAxisLabels ? thisWidget.yAxisLabel : '')
//.tickFormat(d3.format('.02f')) //floating point/money 'd' for integers
.tickFormat(d3.format('.02f'))
.tickSize(6); //EAC MOD

 

Note the .tickFormat(d3.format('.02f')

 

Just change the '.02f' to your preferred d3 format.  (https://github.com/d3/d3-format)

Top Tags