How to use candlestick charts to display data in Highcharts

Highcharts is a very popular JavaScript chart library that can display various forms of data. Candlestick Chart is a type of chart specially used to display financial data such as stocks. It can intuitively display information such as opening price, closing price, highest price, lowest price, etc. This article will introduce how to use candlestick charts to display data in Highcharts, and give specific code examples.

1. Preparation

Before using Highcharts, we need to introduce the JavaScript file of Highcharts. It can be introduced through CDN or downloading local files. Here is the CDN method as an example:

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>

In addition, in order to facilitate the display of data, an open source JavaScript library Faker.js is used to generate random data. It can also be introduced through CDN:

<script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>

2. Create a container

To display Highcharts charts, you first need to create a container element, usually a div tag, and specify an ID, for example:

<div id="chart-container"></div>

Here we set the ID of the chart container to "chart-container".

3. Set up data

Here, we need to generate some fake data to display the candlestick chart. We can use the Faker.js library to generate random data and then format it into the data format required by Highcharts. The following is an example of generating 100 data points:

let data = [];
for (let i = 0; i < 100; i++) {
  let open = parseFloat(Faker.Finance.amount(1000, 5000));
  let high = parseFloat(Faker.Finance.amount(open, open * 1.1));
  let low = parseFloat(Faker.Finance.amount(open * 0.9, open));
  let close = parseFloat(Faker.Finance.amount(low, high));
  data.push([i, open, high, low, close]);
}

The above code will generate an array containing 100 data points. Each data point is an array containing five values, respectively. Index, opening price, high price, low price and closing price.

4. Create a candlestick chart

After we have the data, we can create a basic candlestick chart. The following is a simple sample code:

Highcharts.chart('chart-container', {
  chart: {
    type: 'candlestick'
  },
  title: {
    text: '股票数据'
  },
  series: [{
    data: data
  }]
});

The above code will create a candlestick chart in the "chart-container" container, and the data uses previously generated random data. Among them:

• type: 'candlestick' specifies the chart type as candlestick chart.
• title: { text: 'Stock Data' } Set the chart title to "Stock Data".
• series: [{ data: data }]Specifies the data series and sets the previously generated random data as the data series.

5. Customized style

The default candlestick chart style may not meet our needs, and we need to customize the style. Here is a slightly more complex sample code that allows for richer styling effects:

Highcharts.chart('chart-container', {
  chart: {
    type: 'candlestick'
  },
  title: {
    text: '股票数据'
  },
  xAxis: {
    labels: {
      formatter: function () {
        return data[this.value][0];
      }
    }
  },
  yAxis: {
    opposite: false,
    labels: {
      formatter: function () {
        return '$' + this.value;
      }
    }
  },
  tooltip: {
    pointFormat: '<span style="font-weight:bold">{series.name}</span><br>' +
        '开盘价: <b>${point.open}</b><br/>' +
        '最高价: <b>${point.high}</b><br/>' +
        '最低价: <b>${point.low}</b><br/>' +
        '收盘价: <b>${point.close}</b><br/>'
  },
  plotOptions: {
    candlestick: {
      color: '#0f0',
      upColor: '#f00',
      lineColor: '#000',
      upLineColor: '#000',
      lineWidth: 1
    }
  },
  series: [{
    name: '股票价格',
    data: data
  }]
});

In the above code, we can see that the following has been added:

• xAxis.labels.formatterProperty sets the label of the X-axis to the data index.
• yAxis.labels.formatterThe property sets the Y-axis label to a dollar sign, which can also be modified according to actual needs.
• tooltip.pointFormatThe property adjusts the format of the prompt box, including information such as the opening price, the highest price, the lowest price, and the closing price.
• plotOptions.candlestickThe property is used to set the style of the candlestick chart. Here we specify the rising and falling colors and border colors, and set the line width to 1.

6. Summary

Using Highcharts to display candlestick charts is not very complicated. First we need to prepare the data, then create a container element to specify the ID, then create a Highcharts instance and pass in the container ID, and finally set the data, style, title and other attributes. Of course, the specific style settings need to be adjusted according to the actual situation. The following is the complete sample code:

  
  
  <script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>
  



  <div id="chart-container"></div>

  <script>
    let data = [];
    for (let i = 0; i < 100; i++) {
      let open = parseFloat(Faker.Finance.amount(1000, 5000));
      let high = parseFloat(Faker.Finance.amount(open, open * 1.1));
      let low = parseFloat(Faker.Finance.amount(open * 0.9, open));
      let close = parseFloat(Faker.Finance.amount(low, high));
      data.push([i, open, high, low, close]);
    }

    Highcharts.chart('chart-container', {
      chart: {
        type: 'candlestick'
      },
      title: {
        text: '股票数据'
      },
      xAxis: {
        labels: {
          formatter: function () {
            return data[this.value][0];
          }
        }
      },
      yAxis: {
        opposite: false,
        labels: {
          formatter: function () {
            return '$' + this.value;
          }
        }
      },
      tooltip: {
        pointFormat: '<span style="font-weight:bold">{series.name}</span><br>' +
            '开盘价: <b>${point.open}</b><br/>' +
            '最高价: <b>${point.high}</b><br/>' +
            '最低价: <b>${point.low}</b><br/>' +
            '收盘价: <b>${point.close}</b><br/>'
      },
      plotOptions: {
        candlestick: {
          color: '#0f0',
          upColor: '#f00',
          lineColor: '#000',
          upLineColor: '#000',
          lineWidth: 1
        }
      },
      series: [{
        name: '股票价格',
        data: data
      }]
    });
  </script>

The above is the entire process of using Highcharts to display candlestick charts. Through the above sample code we can learn several major areas:

• Import Highcharts JavaScript document.
• Import the Faker.js JavaScript file.
• Create a container element with id.
• Use Faker.js to generate random data.
• Create a new Highcharts instance and pass in the container element ID.
• Define the type of candlestick chart you want to display in the Highcharts instance.
• Pass the generated data into the Highcharts instance as the Data property.
• Format data for X-axis labels and Y-axis labels: for example, setting dollar signs, etc.
• Set the style-related properties of the candlestick chart in the Highcharts instance: such as color, line width, etc.
• Set the tooltip format in the Highcharts instance and set the prompt content in super detail.
• Set a title to describe the contents of the chart.

The above code should be easy to understand if you understand the basics of Highcharts and the basic syntax of JavaScript. For beginners, they can initially master the related skills of Highcharts. For senior technical engineers, reading this article will also benefit a lot. The technical necessity of front-end chart visualization is still rising. I believe this article can also help you. Provide a solid foundation for moving forward.

The above is the detailed content of How to use candlestick charts to display data in Highcharts. For more information, please follow other related articles on the PHP Chinese website!