javascript - Highstock Y-Axis labels overlap eachother - Stack Overflow

admin管理员组

文章数量:1416314

Please take a look at this fiddle for the chart I am building.

My issues are:

• Y-Axis labels and percentages overlap. Is it possible to align them so that I have green percentages, the label "Two", then red percentages and finally the label "Three"? If you take a look at another fiddle it certainly looks tidier.
• Highstock shows its labels inside the graph grid. Can these be pushed to the outside so that the labelling looks more like the way my second JSFiddle displays them?

The first issue is most important for me to solve, and the second I could live with if I have to:

chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            zoomType: 'xy'
        },

        rangeSelector: {
            selected: 4
        },

        yAxis: [{
             title: {
                text: 'One',
                style: {
                    color: 'blue'
                }
            },
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                }
            }
        },
        {

             title: {
                text: 'Two',
                style: {
                    color: 'green'
                }
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: 'green'
                }
            },
  opposite: true
        },
{

             title: {
                text: 'THree',
                style: {
                    color: 'red'
                }
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: 'red'
                }
            },
  opposite: true
        }  
      ],

        plotOptions: {
            series: {
                pare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    });
}

});​

Please take a look at this fiddle for the chart I am building.

My issues are:

• Y-Axis labels and percentages overlap. Is it possible to align them so that I have green percentages, the label "Two", then red percentages and finally the label "Three"? If you take a look at another fiddle it certainly looks tidier.
• Highstock shows its labels inside the graph grid. Can these be pushed to the outside so that the labelling looks more like the way my second JSFiddle displays them?

The first issue is most important for me to solve, and the second I could live with if I have to:

chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            zoomType: 'xy'
        },

        rangeSelector: {
            selected: 4
        },

        yAxis: [{
             title: {
                text: 'One',
                style: {
                    color: 'blue'
                }
            },
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                }
            }
        },
        {

             title: {
                text: 'Two',
                style: {
                    color: 'green'
                }
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: 'green'
                }
            },
  opposite: true
        },
{

             title: {
                text: 'THree',
                style: {
                    color: 'red'
                }
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: 'red'
                }
            },
  opposite: true
        }  
      ],

        plotOptions: {
            series: {
                pare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    });
}

});​

• javascript
• highcharts

Share Improve this question Follow edited Nov 22, 2012 at 18:11 the Tin Man 161k4444 gold badges221221 silver badges306306 bronze badges asked Nov 22, 2012 at 17:54 Nick LewisNick Lewis 78211 gold badge1111 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can control those positions with a bination of yAxis.labels.x and yAxis.title.margin.

For example the first yAxis:

        {
             title: {
                text: 'One',
                style: {
                    color: 'blue'
                },
                margin: 25 //push out 25 pixels
            },
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                },
                x: -20 //push out 20 pixels
            }
        }

Updated fiddle here.

本文标签： javascriptHighstock YAxis labels overlap eachotherStack Overflow