为高亮度区域图表应用外边框

Question

我正在实现模拟中显示的区域图表，但在某些部分有严格要求，并且无法获得http://api.highcharts.com/highcharts中可用的选项，以便将图表配置为原样。

这是模拟外观。

到目前为止我所取得的成就是：

  

Fiddle Demo

所以我无法实现

1.background color

backgroundColor: {
                linearGradient: false,
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },

2。只有外边界线。 （如模拟中所示）

3。在悬停中显示所有3个标签。 （如模拟中所示）

4。传奇喜欢＆＃34; CPM IMPS SPEND BY TIME＆＃34;用颜色我的意思是我想在模拟中实现同样的效果。

要实施的最后一点：

Answer 1

嗯..

1.background color：

chart: {
   backgroundColor: 'black', //for whole plot


name: 'IMPS',
data: [
...
], color: 'rgb(213, 156, 72)' //for one area

2。只有外边界线。 （如模拟中所示）

   yAxis: [{

        lineWidth: 1,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0
    }, {

        lineWidth: 1,
        title: {
            text: ''
        },
        labels: {
            formatter: function () {
                return this.value / 1000 + 'k';
            }
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        linkedTo: 0,
        opposite: true
    }],

3。在悬停中显示所有3个标签。 （如模拟中所示）

tooltip: {
  pointFormat: '{series.name} <b>${point.y:,.0f}</b> <br/>', //like in mock up
  shared: true, //all series
  crosshairs: true //vertical line
},

4。像“CPM IMPS SPEND BY TIME”这样的传说，颜色我的意思是我想要像模拟一样实现。

所以我已经在this question

中回答了问题

实施的最后一点：

JS：

    tooltip: {
        backgroundColor: null,
        borderWidth: 0,
        shadow: false,
        useHTML: true,
        style: {
            padding: 0
        },

现在您可以按照自己的喜好自定义工具提示：

.highcharts-tooltip>span p {
    margin: 0;
}
.highcharts-tooltip>span span{
    display: none;
}
#pCPM{background: rgb(87, 188, 0);}
#pIMPS{background: rgb(213, 156, 72);}
#pSPEND{background: rgb(12, 170, 226);}

Highchart的API不允许您在轴上设置当前值，但您可以禁用默认标签并将手工标签放置在绝对位置，就像我已经使用图例一样。

摘要FIDDLE